How can I change an HTML class for a mobile device?

Question

How can I update the Bootstrap class .row-eq-height to have display: block; for mobile only?

This is what I've tried.

$(document).ready(function() {
    if ($(window).width() <= 768) {
        $( ".row-eq-height" ).css( "display", "block" );
    }
});

Possible duplicate of: http://stackoverflow.com/q/6370690/4639281 — , Jul 15 '15 at 23:51

Lansana Camara · Answer 1 · 2015-07-15T23:42:04.403

CSS method:

@media (max-width: 768px) {
    .row-eq-height {
        display: block;
    }
}

Be sure to change the pixel value to target your specific mobile devices.

Read more about media queries here: CSS Media Queries - MDN Docs.

jQuery/JS method:

function checkPosition() {
    if (window.matchMedia('(max-width: 768px)').matches) {
        //Do this
    } else {
        //Do that
    }
}

The above code does not support IE9 because of the use of window.matchMedia().

Read more about this method here: Window.matchMedia() - MDN Docs.

1 Answers1