0

I'm currently managing a website through a "build you own website" kind of platform that is very restrictive in terms of customization.

I had problems on the mobile version with text in two columns showing badly on the home page so I was able to hide it using the #id that was generated by the platform.

Sadly, the customization affects the whole website, so it also hides the second column of every text.

I've been working so far with something like this :

@media (max-width: 767px) {
  .col.align.left {
  visibility:hidden;
  display:none;
  }
  #text_2 {
  visibility:hidden;
  display:none; 
  }

Now, I saw through the html of the website that there is a data-id attribute that is generated to each item. I was wondering if there is a way to call out that data-id in the css to hide only that item? I tried something like this but it doesn't work

@media (max-width: 767px) {
  .col.align.left {
  visibility:hidden;
  display:none;
  }
  #text_2 #data-id="118233376" {
  visibility:hidden;
  display:none; 
  }

I cannot create any custom class, id or anything on that platform so it is very limited, hoping someone can help. Thank you

petitclercj
  • 3
  • 1
  • Does this answer your question? [Select elements by attribute in CSS](https://stackoverflow.com/questions/5324415/select-elements-by-attribute-in-css) – disinfor Feb 22 '23 at 16:57

1 Answers1

2

Yes, like this:

#text_2[data-id="118233376"] {
  visibility:hidden;
  display:none; 
}

See https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#css_access

j08691
  • 204,283
  • 31
  • 260
  • 272