Suppress some items on narrow (or mobile) screens

Ferguson

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)

snakeey11

Ferguson wrote: »

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)

You should be able to use a media query in your theme CSS, something like:

@media screen and (max-width: ###px) {
  .sm-page-widget-1031122,
  .sm-page-widget-352389 {
    display: none;
  }
}

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

Ferguson

snakeey11 wrote: »

You should be able to use a media query in your theme CSS, something like:

@media screen and (max-width: ###px) {
  .sm-page-widget-1031122,
  .sm-page-widget-352389 {
    display: none;
  }
}

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

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.

snakeey11

Yeah, I inspected the markup for the content blocks to get the classnames. As long as you don't replace those logos with new content blocks, the CSS should stick. If you do end up replacing them, or want to have additional sections hidden, you can inspect the page using your favorite browser's developer tools and replace/add to the CSS the new classnames.