Suppress some items on narrow (or mobile) screens
![Ferguson](https://us.v-cdn.net/6029383/uploads/userpics/827/nDOG2GYHKTN70.jpg)
I've got three logo images on the top of my site, one left, right and center. I like the look on moderate to large screens.
On a small screen like a smartphone, the left and right go to separate lines and take up the whole screen.
I want to just turn those off below a certain screen width. Or for mobile if that's easier.
Is there any CSS magic that will do that, i.e. react to screen with so I can do a {display:none} for mobile and/or narrow screens?
Lacking that, any suggestions how to get something similar? (Example at the web site below)
On a small screen like a smartphone, the left and right go to separate lines and take up the whole screen.
I want to just turn those off below a certain screen width. Or for mobile if that's easier.
Is there any CSS magic that will do that, i.e. react to screen with so I can do a {display:none} for mobile and/or narrow screens?
Lacking that, any suggestions how to get something similar? (Example at the web site below)
0
Comments
You should be able to use a media query in your theme CSS, something like:
where the '###' is the maximum width in pixels for when you want the CSS to take effect. I think this will give you what you're looking for.
-Mike
(and an avid landscape photographer - view my website)
Very nice, thank you Mike. That worked perfectly.
Where did you get the 1031122 and 352389, did you look at my page, or is there magic to how they are numbered?
And if you looked at my page, any idea how they are assigned, and is there some assurance they "stick"? I had assumed I might need to switch to an HTML box and give it my own names.
(and an avid landscape photographer - view my website)