Jump to content

Making a change to the mobile version footer only

Recommended Posts

On my web page I have a photo in my footer. When I switch to mobile mode it does not look good. If I rotate the photo on mobile mode 90 degrees it looks perfect. But then it rotates the photo on desktop mode too which I do not want. Ideally, I want the desktop mode to be horizontal and mobile mode vertical. How can I do this? Thanks.

Link to comment

An easy option would be to add two photos to the footer, one in each orientation you want, then hide the mobile photo on desktop and hide the desktop photo on mobile with custom CSS.

There's many guides here and online for how to do that. In short, you want to set the break point with @media screen.

@media screen and (max-width: 768px)
{
#DesktopPhotoBlockID {
    display:none;
   }
}

In this case, we're saying up to a maximum width of 768 pixels, use the code in the brackets. For block ID, you need to find the block ID of the desktop photo since that's the one you want to hide.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.