Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile Layout Changes


Question

Site URL: https://capao.squarespace.com/our-story

Website password is capao

I'm looking for assistance in changing the position of some blocks within a row for mobile view. I'd like all the images within this row or section to have all the images on top of the text. 

I've tested the following style but I can't figure out how to target the row with the 2 block I'd like to switch.

display: flex;

flex-direction: column-reverse; 

change-position-mobile.thumb.jpg.d46756a954f325571add5a87cc6d4ca1.jpg

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 0

The easiest solution that I have found with issues like this, is to make it 3 separate sections (1 for each row) and then use css to correct padding and margins.

The divs in the blocks like that do not have static ID's and I gave up trying to move them around that way.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...