11

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?

6 Answers 6

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;
  }
}
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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.
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

2 Comments

You can toggle class "lg-2x" if it is not there then add that .
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 !
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;
    }
} 

Comments

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

});

Comments

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.

Comments

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.