CODEWITHSUNDEEP
htmlcss
Aleksi Tappura
Aleksi Tappura

Reputation: 39

Change HTML attribute depending on screen size

I'm using Slidebars as extension to create off-canvas menus for my site. Custom width can be set using data-sb-width attribute. I have set it to 370px like this:

<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="370px"></div>

On mobile i need to change it to 280px, but I don't know if this is possible with CSS media queries. Help would be needed.

Upvotes: 1

Views: 2604

Answers (1)

jcaron
jcaron

Reputation: 17720

As this is an HTML attribute and not a CSS style, you won't be able to directly use CSS media queries for this.

I see several options to explore:

  • set the data-sb-width using Javascript or jQuery (before you setup the slide bars)
  • use two slide bars with different widths, and use media queries to hide one or the other (not quite sure the slide bar script will like that)
  • give the width as a percentage rather than a fixed width, but that may be difficult to control

Upvotes: 1

Related Questions