'css media query adding class to HTML

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?

javascripthtmlcss


Solution 1:[1]

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;
  }
}

Solution 2:[2]

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

Solution 3:[3]

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;
    }
}

Solution 4:[4]

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");
    }

});

Solution 5:[5]

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.

Solution 6:[6]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 AndrewL64
Solution 4 Shelly
Solution 5 ste
Solution 6 dwhynot

Related Questions