logo responsive design

[lenuit]

Dear Andrew,

I have another topic to clarify.
After copying the below code in the style.css file, the logo moved to the left

#logo-wrap, #nav-primary { left: -250px !important; }

It works perfectly, but as you know the layout stops to be responsive because the logo disappears from the smartphone screen. How can I stop the shift only on the mobile display?

Hopefully to be clear, it wasn’t so easy to explain.
Thanks!

Carlo

[satori]

Hey Carlo,

to declare a CSS rule for a certain range of screen sizes, you can use the @media option:
@media only screen and (min-width: 767px) { #logo-wrap, #nav-primary { left: -250px !important; } }

You can read more about the @media queries e.g. here.

Sincerely,
Andrew / Satori Studio

[Author]

Posts