Jump to content

How to prevent code blocks from stacking on mobile?

Go to solution Solved by Beyondspace,

Recommended Posts

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
Link to comment
  • Solution
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 */
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.