Button alignment on mobile

Site URL: https://marcoleone.it/bud-light

Hello!

I'm having issues with buttons alignment with the mobile version of my website portfolio.

The ideal would be to have all three buttons aligned at the bottom of the page. Is there any way this could be fixed? Thank you for your help.

Marco

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   ❯

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.

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;
}
}

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!!

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

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.

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

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

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>

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.

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.

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