Reply To: Preventing Style Jump using Media Queries and Responsive Layouts?

[Designer42]

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