Jump to content

How to prevent code blocks from stacking on mobile?

Go to solution Solved by Beyondspace,

Recommended Posts

Posted (edited)

Hi, I have been having trouble with some code blocks on my site: https://yellow-algae-6km8.squarespace.com/#/osmosis-art-show/

I have created my navigation using three code blocks up top (Name, Home, Contact).They display correctly on desktop but stack on mobile. How do I prevent them from stacking on mobile (how do I get them to stay in one row on mobile like they do on desktop)?

 

Thanks!

IMG_3075.PNG

Edited by bivano
  • Solution
Posted
4 hours ago, bivano said:

Hi, I have been having trouble with some code blocks on my site: https://yellow-algae-6km8.squarespace.com/#/osmosis-art-show/

They display correctly on desktop but stack on mobile. I'm using three code blocks to create custom navigation where one block is my name, the next is a home button, and the last is a contact button. Does anyone know how to have these display in one row on mobile? Currently it's only on this one page I've linked up top.

 

Thanks!

IMG_3075.PNG

You can wrap you css code on media query so it will not affect the mobile display.

@media only screen and (min-width: 768px) {
/* style for tablet and desktop, not mobile */
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

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.