CODEWITHSUNDEEP
jquerymobile
user2583429
user2583429

Reputation: 955

How can I change my CSS according to the screen width of a mobile device?

I'm trying to to apply a different CSS style to my websites as soon as the width of the document is lower than 700px and again when it's lower than 500px (smartphone). The code I have is the following, what did I do wrong?

if($(document).width() < 749) {
    if($(document).width() < 700) {
        $('#cirkelcontainer').hide();   
        $('h3').css('word-wrap', 'break-word');
        $('.datum').css('width', '100%');
        $('.datum').css('color', 'black');
        $('.datum').css('margin-top', '13px');
        $('.datum').css('background-color', 'white');
        $('.datum').css('word-wrap', 'break-word');
        $('.datum').css('height', 'auto');
        $('.datum').css('margin-left', '-2%');
        $('#nieuwsnavlinks').css('width', '90%');
        $('#nieuwsnavlinks p').css('text-align', 'center');
        $('#nieuwsnavrechts').css('width', '228px');
        $('#nieuwsnavrechts').css('margin-left', 'auto');
        $('#nieuwsnavrechts').css('margin-right', 'auto');
        $('#nieuwsnavrechts').css('float', 'none');
        $('content').css('padding-bottom', '25px');
    }

    if($(document).width() < 500) {
        $('button').css('width', '100%');
        $('form button').css('width', '125px'); 
        $('#datum:nth-child(n)').hide();
        $('#nieuwsoverzicht:nth-child(n)').css({
            'width': '100%',
            'height': 'auto',
            'float': 'left'
        });
        $('nav ul ul li').css('border-left', '1px dotted black');
        $('#nieuwsoverzicht:nth-child(n) p').css('word-wrap', 'break-word');
        $('h4').css('word-wrap', 'break-word');
        $('content').css('width', '100%');
        $('.nieuwstext:nth-child(1)').find('a').html('&#x25C0;');
        $('.nieuwstext:last').find('a').html('&#x25B6;');
        $('#nieuwsnavrechts').css('width', '162px');
    }
}

EDIT: It works perfect in a normal browser.

Upvotes: 3

Views: 15739

Answers (2)

glautrou
glautrou

Reputation: 3198

Solution:

Use Media Queries instead.

What is it?

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.

How to use it?

You can find a guide here and some real world examples here.

Example:

// Inside HTML header:
<link rel='stylesheet' href='css/default.css' />
<link rel='stylesheet' media='screen and (min-width: 500px) and (max-width: 700px)' href='css/mobile.css' />

The advantage of splitting CSS in two different files make easier to maintain and mobile.css won't be imported if your user is on a desktop.

// Inside CSS file (default.css):
@media screen and (min-width:500px) { ... }

The advantage of specifying all CSS styles for all resolutions in one file (default.css) is that if you are on a desktop and resize your browser window your website will automatically adapt. To improve maintenance you may want to split to a file per device type but import all the files in all pages.

Note:

There are many ways to implement this, like mobile-first or desktop-first. As per your question in all cases you don't need to change your HTML, but only specify resolution criteria for each group of style (in a separated CSS file or not).

You can look at my examples above, but if you are interested by real example you can find a lot on the Web. I let you resize your browser window on the Microsoft home page and look at how elements change (menu, carousel, columns, ...).

Going further:

There are lots of frameworks on the Web that help you to do great things. I particularly like Bootstrap (Grid example) but there are other alternatives.

Upvotes: 5

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382464

There's a standard feature of CSS allowing just this : having sets of rules which apply for certain conditions, for example window size.

This feature is called media queries. Here's the MDN documentation.

You would have for example

/* here the rules for small windows */
@media (max-width: 500px) { 
    #cirkelcontainer {
         display: none;
    }
    h3 {
         word-wrap: break-word;
    }
}

/* here the rules for windows between 500px and 900px */
@media (min-width: 500px) and (max-width: 900px) {
    form button {
         width: 125px;
    }
}

Upvotes: 11

Related Questions