On my ipad and iphone when I click on the folders and they open/expand the background image expands along with them. This does not happen on desktops. Does anyone know or have any suggestions to prevent that from happening on mobiles?
The page does not appear to be made for mobiles. It’s not responsive and does not include the viewports metatag.
The problem may have more to do with the background being fixed, as that can be a problem for some mobiles.
But in reality, until the site is properly responsive, these smaller mobile issues can get to the back of the to-do list.
I’m on a mobile at the moment and have no developer tools but I’m guessing you have applied background attachment fixed to the body but iOS and other mobiles have a problem with this when cover is used and will stretch the background to the content rather than the viewport.
There is a fix in that you can apply the background to a position fixed element instead and then not use background attachment fixed at all.
I generally use body:after to create a viewport width and height position fixed element and then just apply a normal background to it and then cover will work (ensuring z index is controlled for your content to remain on top).
Also take note of Sam’s comments about the viewport meta tag.
In this explicit case display:block is not needed because co-ordinates are specified at the same time as using position:fixed.
If you were using auto co-ordinates for positioned elements then the display:block is important because the auto position depends on where the element was in the document and that position would change if the element was inline or block.
Therefore when using :after or :before I generally add the display:block just in case co-ordinates are removed at a later date but in this case it is not really needed.
Positioned elements automatically get a display of block so its only in the case of auto positioned elements (positioned elements without co-ordinates) that it really matters.