Jump to content

Alignment and block order issues on mobile

Recommended Posts

Site URL: https://www.treetopmarketing.ca/portfolio-services-1

Hey Everyone!

I am fairly new to web design etc and have been working on a couple sites for my employer. I have run into issues with alignment of blocks on certain pages and therefore issues with the layout order on mobile.

I have type blocks under images and because the paragraph lengths are different, the buttons under those are not lining up horizontally when stacked directly under the image. So I figured out that if you put a spacer that goes across the whole page you can force things to line up nicely, then delete the spacer. This however causes the order in mobile to mess up, since it acts like a new set of columns. 

It should be image text button, image text button etc. but when forced to line up nicely the mobile looks like image image image, text text text, button button button

It seems either I can have things aligned, but out of order on mobile, or the other way around. 

I am hoping there is some sort of solution where we can have both the alignment and order correct. Maybe css that reorders the blocks when in mobile? Or maybe I am just missing a trick in laying this out so Squarespace cooperates.

I have tried a couple things but it seems that the code is beyond me. Any help would be greatly appreciated! I have another site we are building as a sub site of this main one that is facing the same issue.

Thanks!

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You can recreate the layout the way you did the first time. Then we can use CSS to evenly align the button.

Thus, on mobile, it will have a correct order.
With the current layout, you need to use a lot of JavaScript to handle the problem.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.