Jump to content

*Complex request* I'd like a text layout to split into two columns rather than one when it goes down to mobile size - full explanation in post

Recommended Posts

Site URL: https://ladybug-chicken-2tp4.squarespace.com/

Hello,

 

I have a page on my site: https://ladybug-chicken-2tp4.squarespace.com/price-list

Site pass: *3iRgpCKJ-8@bBZ7

On this page i have a set of prices in 3 columns. When it goes down to mobile, it becomes only one column and the prices no longer align, they appear underneath. This is how it appears currently on the link above.

However, I'd like the prices to be on the right of the items, so that you can see how much each thing is. I have mocked this up on the attached image. This is how I would like it to look. 

TLDR: how the link is now (view on mobile) is the current state (undesireable), how the attached image is, is how i would like it to be (awesome!).

Is this even possible? Thanks in advance for any insight - I'm out of my depth for sure!

Jack

Screenshot 2022-03-13 at 20.35.58.jpg

Link to comment
  • Replies 1
  • Views 366
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding this to Design > Custom (this for first section)

/* Mobile price list */
@media screen and (max-width:767px) {
div#page-section-61f6a2f76ed44e699059edf7 .span-12>.row>.col:nth-child(2) {
    width: 70% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.