Jump to content

mobile side-by-side images vs. stack

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
20 hours ago, tinypops said:

I'm trying to bring these date images (filter buttons) side-by-side like they appear on desktop instead of the default mobile stacking. 
Any css that can help? 

 

site:https://contrabass-round-d5yj.squarespace.com/agenda
pass:wethepeoplesbefore

mobile.png

desktop.png

Hi @tinypops,

 

Try adding to your Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #schedule-main .Index-page-content .row > .col > .row:nth-child(2) {
    display: flex;
  }

  #schedule-main .Index-page-content .row > .col > .row:nth-child(2) > .col {
    width: 20% !important;
  }

  #schedule-main
    .Index-page-content
    .row
    > .col
    > .row:nth-child(2)
    > .col:first-child {
    display: none;
  }
}

Let me know how it works on your site 

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing result

image.png.0e90a317ca3461ca31ed1bfe73903e39.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.