Jump to content

Reordering sections on mobile only

Recommended Posts

I have used CSS found in previous threads on how to reorder sections on mobile only – specifically reversing the order of the first and second sections on all pages of the below website.

I am having two issues:

1. On mobile when the sections are reversed there is a large gap below the images (first section) and before the text (second section)

2. On the Masterclasses page the third section is displaying further down the page when the CSS is used

Can someone please help to rectify the two issues and let me know if there is a more simple way of me reversing the section order on mobile for each of the pages within the site?

Thanks in advance.



Password: ambmb2015

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

#1. #2. Add this CSS code

/* Mobile space */
@media screen and (max-width:767px) {
[data-section-id="65766bfe160ccb66045d7b97"], [data-section-id="65714803a93fb05d5d91d49b"] {
    padding-top: 0px !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.