css media query adding class to HTML

Question

I have this HTML:

<li><a href=""><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</a></li>

I am then using this media query in my CSS:

@media (max-width: 1000px) {
    ...
}

how can i change my tag to:

<i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i>

when the media query takes effect?

AndrewL64 · Accepted Answer · 2020-03-02 22:03:42Z

17

You can use pure css to achieve this by just replicating the list-item and toggle with media query like this:

HTML:

<li class="bigScreen"><a href=""><i class="fa fa-iconname"></i>Link Name</a></li>

<li class="smallScreen"><a href=""><i class="fa fa-iconname lg-2x"></i>Link Name</a></li>

CSS:

@media (max-width: 1000px) {
  .bigScreen {
    display:none;
  }
  .smallScreen {
    display:block;
  }
}

@media (min-width: 1001px) {
  .bigScreen {
    display:block;
  }
  .smallScreen {
    display:none;
  }
}

edited Mar 2, 2020 at 22:03

answered Apr 12, 2015 at 20:11

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Henckel Over a year ago

This is the best answer. It is a bad idea to use JS resize function because the resize has bugs in many browsers. I have seen several cases of resize fails to fire based on grabbing the corner of the window, or bottom edge, etc. But using two classes bigScreen and smallScreen is super versatile for many things.

Jasper Over a year ago

Maintenance wise this is not a very nice solution. If you're in need to do this more often you'll end up with all sorts of elements having been copy/pasted, which easily leads to mistakes when maintaining the code a few months or even years later. The JavaScript approach is more complex but isn't duplicating code.

Jacob G · Accepted Answer · 2019-05-09 19:38:42Z

12

CSS is just a styling language, it cannot actually edit the HTML.

If you want to actually make changes to the HTML, use javascript:

jQuery:

var $homeIcon = $('.fa-iconname');

$(window).resize(function() {
  if (window.innerWidth <= 1000) $homeIcon.addClass('lg-2x');
  else $homeIcon.removeClass('lg-2x');
});

JSFiddle Demo

Vanilla JS:

var homeIcon = document.querySelector('.fa-home');

window.onResize = function() {
  if (window.innerWidth <= 1000) homeIcon.classList.add('lg-2x');
  else homeIcon.classList.remove('lg-2x');
};

JSFiddle Demo

edited May 9, 2019 at 19:38

answered Apr 12, 2015 at 19:57

Jacob G

14.2k4 gold badges50 silver badges67 bronze badges

2 Comments

Shelly Over a year ago

You can toggle class "lg-2x" if it is not there then add that .

Shelly Over a year ago

It is quicker , but in long term toggle class is good , when ever we need to add the class. Whereas i like your answer simple and easy to implement .good job !

AndrewL64 · Accepted Answer · 2020-01-12 14:04:28Z

2

You can not do that with css, but you can with JavaScript or jQuery.

fa-2x is essentialy: font-size: 2em; . So, you can do this:

@media (max-width: 1000px) {
    .fa-iconname {
    font-size: 2em;
    }
}

edited Jan 12, 2020 at 14:04

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

answered Apr 12, 2015 at 20:01

Danko

1,8741 gold badge15 silver badges13 bronze badges

Comments

Shelly · Accepted Answer · 2015-04-12 20:09:37Z

0

Toggle class lg-2x on element li when the window size is less than 1000px .

$( window ).resize(function() {
    if($(window).width() <=1000) {
        $('i').toggleClass(function() {
           if ( $( this ).is( ".lg-2x" ) ) {
               console.log("class already there good to go");
           } else {
              $( this ).addClass("lg-2x");
           }
        }
    }else{
           $('i').removeClass("lg-2x");
    }

});

answered Apr 12, 2015 at 20:09

Shelly

3531 silver badge7 bronze badges

Comments

ste · Accepted Answer · 2019-02-10 16:26:03Z

0

You can create an equivalent class for bigger screen and leave it empty:

@media (min-width: 1000px) {
    .lg-2x {
        /* empty class */
    }
}

and assign it to the html element from the beginning.

answered Feb 10, 2019 at 16:26

ste

3,2895 gold badges46 silver badges78 bronze badges

Comments

dwhynot · Accepted Answer · 2022-04-19 13:53:54Z

0

Use a class identified as a class whose name indicates it is affected by media queries: media-lg-2x{}

 .media-lg-2x{}
 @media (max-width: 1000px) {
    .media-lg-2x {
    font-size: 1em;
    }
 } 
 @media (min-width: 1000px) {
    .media-lg-2x {
    font-size: 2em;
    }
 }

I prefer to keep content confined to a single instance, and deal with display issues in code.

answered Apr 19, 2022 at 13:53

dwhynot

1511 silver badge9 bronze badges

Collectives™ on Stack Overflow

css media query adding class to HTML

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related