Tiled Image on Website and Responsive Web Design

(Steve Peterson) #1

I have a website, www.marcyhorwitz.com on which I have a tiled image in the Site Styles section that I have selected hidden for mobile and tablet that continues to be visible on both devices when I test it in Rapidweaver and indeed after I publish the site.
Any ideas of what may be happening here?

(Robert Ziebol 🖖🏼) #2

Since that is the site styles stack I do not believe those buttons will work like they are suppose to. You need to have the site styles stack on all versions.

(Andrew Tavernor) #3

The stacks responsive controls will only hide visible elements - essentially CSS display:none.

Site styles itself is not visible on the published page and thus cannot be shown or hidden. The code it writes out will not be affected by these controls, just as the code from any other stack would not be.

It is super easy to hide though as it is merely a background-image on the body. The following code will hide it for tablet and smaller screens (as per the Foundation breakpoints) as you have in the settings above. If you only wanted to hide it for mobile sized screens you would simply change the breakpoint to 640px.

@media screen and (max-width: 1000px){ body{ background-image:none!important } }

(Steve Peterson) #4

As always, clear and succinct group. I learn a lot every time I post a question. Don’t know what I’d do without the “brain trust”. :slightly_smiling: