Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Preventing Style Jump using Media Queries and Responsive Layouts?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #151721
    Designer42
    Participant

    We have a fairly large site with a fairly large CSS file. Plans are in the works to cut it down, HOWEVER, for now, is there a way to prevent or minimize the style jump on a page when the pages load. I am using @Media queries directly in the CSS file to ‘mobilize’ the site if it hits anything below 767px. I have been using the Media Queries in the style sheet and adjusting them for a few years now but I can not figure out the best way to minimize the layout jump from desktop to mobile when a mobile device hits the page. I have also tried pulling them out of the main style sheet and putting them in a separate ‘mobile’ stylesheet.

    Any ideas on how to do this or links on how to do this?

    #151724
    Paulie_D
    Moderator

    No-one will see the ‘jump’, they’ll get served the styles appropriate to their device.

    The only people who see the ‘jump’ are people who resize their browsers…basically, web developers, who are used to it.

    #151817
    Designer42
    Participant

    @Paulie_D

    Yeh, that is my issue though. I just realized. I don’t have an @Media query around the main desktop styles so it is more or less.

    /All my styles for everything: colors, font-family,desktop widths, etc./

    style{width:960px}

    style2{width:400px}

    style3{width:560px;}

    /My mobile styles/

    @media screen and (max-width: 767px){
    /My mobile styles here./

    style{width:100%}

    style2{width:20%}

    style3{width:80%;}

    }

    So I am seeing the jump because I am serving the general desktop styles first for width, etc. and then the mobile styles kick in after those load.
    There is a jump no matter what.

    I am going to have to rethink my whole CSS when it is pertaining to fixed width and height elements and separate out the colors, fonts, etc. to other areas of the style sheet.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.