Jump to content

Button alignment on mobile

Recommended Posts

  • Replies 11
  • Views 910
  • Created
  • Last Reply

Top Posters In This Topic

That's a tricky one.
The problem is that Squarespace arranges all buttons below each other on smartphone and as far as I know that can't be bypassed. It's possible to arrange them with CSS but this needs to be customized for each case you're using it.

How about you use one text block and use ASCII arrows (icons)

They will get treated like text and you just have to apply three links (previous, back, next)
 
 

 ❮   BACK TO 3D   ❯

 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment

Thank you for your reply.

I just tried but I'm not sure how to space the ASCII arrows and BACK to align like the buttons, still looks ok on a big screen but all misaligned on mobile. Please take a look.

I have no problem injecting code on each page if it is going to look correct.

Screenshot_20210921-092707 (1).png

Link to comment

Add to Design > Custom CSS

/* Bud Light mobile pagination */
@media screen and (max-width:767px) {
div#page-60d12ddc4330432b7669da6d .span-12>.row:nth-child(5) .span-4 {
    width: 33.3333% !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
On 9/26/2021 at 9:56 PM, mr_leone said:

Hi @tuanphan, thank you for that!
It actually works on the Budlight page. How do I make it work on all the other pages?

Thank you for your help!!

Can you share link to all pages where you have problems? We can give code easier

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

Most of the pages on the site have this problem as they all have arrows to go back and forth between projects and a Back button to go to the main page for each category.

If you go to 
https://marcoleone.it/3d-visualization
at the bottom of that page the arrows do not align on mobile
those arrows allows you to go through the different main categories.

If you go on 
https://marcoleone.it/bud-light
at the bottom the arrows are aligned thanks to your code but if you tap the arrow on the right to go to the next project and scroll to the bottom, those are misaligned and so on for all the other projects.
and this is the same for all the other main categories.

Thank you again for your help.

 

Link to comment
On 10/1/2021 at 2:47 AM, mr_leone said:

Most of the pages on the site have this problem as they all have arrows to go back and forth between projects and a Back button to go to the main page for each category.

If you go to 
https://marcoleone.it/3d-visualization
at the bottom of that page the arrows do not align on mobile
those arrows allows you to go through the different main categories.

If you go on 
https://marcoleone.it/bud-light
at the bottom the arrows are aligned thanks to your code but if you tap the arrow on the right to go to the next project and scroll to the bottom, those are misaligned and so on for all the other projects.
and this is the same for all the other main categories.

Thank you again for your help.

 

The code I sent will work on one page only. One page = one code.

I think we need to replicate 2 buttons with Code Block, then you just need to copy - paste, without edit anything. What do you think? I will code & give the code

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
On 10/3/2021 at 11:15 PM, mr_leone said:

That sounds great!
I really appreciate your help @tuanphan!

Try edit a project >> Add a Code Block >> paste this code >> Replace url with new url. If it works, just copy - paste to other projects & change url

<div class="custom-pagi">
<!-- prev arrow -->
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container--left">
	<a href="/3d-visualization" class="sqs-block-button-element--small sqs-block-button-element">&lt;</a>
</div>
</div>
</div>
<!-- Next arrow -->
<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content">
<div class="sqs-block-button-container--right">
	<a href="/product-design" class="sqs-block-button-element--small sqs-block-button-element">&gt;</a>
</div>
</div>
</div>
</div>
<style>
  .custom-pagi {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-pagi>div {
    padding: 0 !important;
}
</style>

 

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

This is working somewhat.
I think I can work with this code but the only issue I have is the buttons position.

When I use this new code the buttons are all the way to the top left and right corner of the page.
On mobile the top right button end up being underneath the menu button so it is impossible to tap.

Ideally these buttons should be at the bottom, aligned with the images like those that are there now.
is that possible?

Thank you again for all the help.

Screenshot_20211006-104454_LI.jpg

Link to comment
On 10/6/2021 at 10:43 PM, mr_leone said:

This is working somewhat.
I think I can work with this code but the only issue I have is the buttons position.

When I use this new code the buttons are all the way to the top left and right corner of the page.
On mobile the top right button end up being underneath the menu button so it is impossible to tap.

Ideally these buttons should be at the bottom, aligned with the images like those that are there now.
is that possible?

Thank you again for all the help.

Screenshot_20211006-104454_LI.jpg

Can you share link to a project where you added new code? We can check it again easier

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.