Side by side buttons for mobile and desktop

On 4/24/2022 at 10:46 PM, HunterD said:

Hi!  I have the same problem. I managed to get the buttons side by side, but I have a problem with the learn more button, see the image bellow. Site: https://www.metcalfmethod.com

 

Thanks!!

 

//* mobile buttons side by side */
@media screen and (max-width:767px) {
div#page-section-6265576ad240466a7d573273 .span-6 {
    width: 50% !important;
    float: left !important;
}}

Please can you explain how you got this number? I'm having similar issue on my website and I don't know how to use it for my website too

1 minute ago, PapaJoe said:

Please can you explain how you got this number? I'm having similar issue on my website and I don't know how to use it for my website too

You can check it via dev tool in the browser. You can share your site here and we can take a look

1 hour ago, bangank36 said:

You can check it via dev tool in the browser. You can share your site here and we can take a look

I have the issue on 3 pages:

1- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s

2- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s-l2t86

3- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s-l2t86-syk7n

PW: aural

Thanks!

58 minutes ago, PapaJoe said:

I have the issue on 3 pages:

1- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s

2- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s-l2t86

3- https://aural.squarespace.com/shows/interview-hollie-beaumont-brp8s-l2t86-syk7n

PW: aural

 

Thanks!

I select the previous block to set style for the wrapper of these button. Using media query to set style only for mobile

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1654720717159_28702 + .row, #block-09a9f42eaa3b002c849c+ .row, #block-c9fe318702523d2821b2 + .row {
    display: flex;
    justify-content: center;
  }
}

You can use the block id by the following extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Let me know how it works on your site

My testing

12 hours ago, bangank36 said:

My testing

Wow, thank you so much! 

It worked!

Hello, 

I'm having a similar issue on my site. Exquisite Cuts

The Shop Now and Book Now buttons become misaligned on mobile. I'd like them to be stacked vertically on mobile.

A separate issue, if someone could help:

The images in my carousel under "Customer Favourites" seem to left-aligned. I'd like them to be centered like the text below them.

I'm having the same issue as many on this thread.

https://www.gtscalemodels.com/lighting

Trying to line up these three text blocks:

THANKS in advance!!

On 6/11/2022 at 9:57 AM, Thulium said:

Hello, 

I'm having a similar issue on my site. Exquisite Cuts

The Shop Now and Book Now buttons become misaligned on mobile. I'd like them to be stacked vertically on mobile.

A separate issue, if someone could help:

The images in my carousel under "Customer Favourites" seem to left-aligned. I'd like them to be centered like the text below them.

For the button, is it what you mean?

On 6/11/2022 at 9:57 AM, Thulium said:

Hello, 

I'm having a similar issue on my site. Exquisite Cuts

The Shop Now and Book Now buttons become misaligned on mobile. I'd like them to be stacked vertically on mobile.

A separate issue, if someone could help:

The images in my carousel under "Customer Favourites" seem to left-aligned. I'd like them to be centered like the text below them.

For the aligning the image, kindly try

@media only screen and (max-width: 767px) {
  section[data-section-id="627c25e49d386b0b773bc0aa"] .user-items-list-carousel__media-container {
    margin: 0 auto !important;
  }
}

Let me know how it works on your site

My testing:

1 hour ago, Gtinoco said:

I'm having the same issue as many on this thread.

https://www.gtscalemodels.com/lighting

Trying to line up these three text blocks:

THANKS in advance!!

Try

[data-layout-label="Lighting Header Content"] .span-12 > .row {
  display: flex;
}

My testing:

Let me know how it works on your site

On 6/11/2022 at 9:57 AM, Thulium said:

Hello, 

I'm having a similar issue on my site. Exquisite Cuts

The Shop Now and Book Now buttons become misaligned on mobile. I'd like them to be stacked vertically on mobile.

A separate issue, if someone could help:

The images in my carousel under "Customer Favourites" seem to left-aligned. I'd like them to be centered like the text below them.

Add to Design > Custom CSS for both problems

/* Fix Buttons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1654596338691_3309+.row * {
    text-align: center !important;
}
body.homepage .user-items-list-carousel__media-container {
    margin: 0 auto !important;
}
}

7 hours ago, bangank36 said:

Try

[data-layout-label="Lighting Header Content"] .span-12 > .row {
  display: flex;
}

My testing:

Let me know how it works on your site

Thank you!

Is there a way to right justify the right container? On slightly bigger screens it looks like that container doesn't stretch over to the right.

Also I tried this on another page https://www.gtscalemodels.com/realism-1 by changing the data-layout-label but it didn't seem to work. Thoughts on why or how I can replicate on the other page?

Thank you so much!!!!!!!!!!!

1 hour ago, Gtinoco said:

Thank you!

Is there a way to right justify the right container? On slightly bigger screens it looks like that container doesn't stretch over to the right.

Also I tried this on another page #by changing the data-layout-label but it didn't seem to work. Thoughts on why or how I can replicate on the other page?

Thank you so much!!!!!!!!!!!

Add justify

[data-layout-label="Lighting Header Content"] .span-12>.row {
    display: flex;
    justify-content: center;
}

#2. Use this code

div#page-header-5c398906b8a04593c3de003f>.row {
    display: flex;
    justify-content: center;
}

On 6/10/2022 at 3:14 AM, bangank36 said:

My testing

Hi, so I have a similar issue with the buttons again, I want there to be two buttons per row for the mobile but they are all stacked on top of each other as shown in the 3 attachments for 3 pages. 

It looks like you have figured it out, right?

On 6/20/2022 at 4:00 PM, bangank36 said:

It looks like you have figured it out, right?

Yes, thanks!

Hey trying to get these two buttons at the bottom of my site to sit side by side on mobile but none of this seems to work. I am on Brine 7.0 

www.shiftmovement.org.uk/funded-opportunities 

password: ShiftMovement1

I am also trying to get the videos in the #testimonials section to stack in a different order. 

The first is correct with the video then the quote but the second needs to do the same. 

any help appreciated!!!! 

5 hours ago, MillyBanks said:

Hey trying to get these two buttons at the bottom of my site to sit side by side on mobile but none of this seems to work. I am on Brine 7.0 

www.shiftmovement.org.uk/funded-opportunities 

password: ShiftMovement1

I am also trying to get the videos in the #testimonials section to stack in a different order. 

The first is correct with the video then the quote but the second needs to do the same. 

any help appreciated!!!! 

 

Add to Design > Custom CSS

/* video quote */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1656470757666_90823+.row+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Thanks @tuanphan that worked really well! 

Anything to make the buttons sit side by side on the very last section? 

2 hours ago, MillyBanks said:

Thanks @tuanphan that worked really well! 

Anything to make the buttons sit side by side on the very last section? 

I think I sent buttons code in your another topic

Hi, I'm having the same issue on my site and have not found a solution that works for me yet.

URL is bethamesswartz.com

password is BAS7795

On desktop the buttons for each of my pages look great, side by side. But when I go on mobile, they're far away from each other and not in line (Images of desktop vs mobile shown below). How can I fix this? 2 or 3 of my pages have three buttons instead of two and it does the same thing, skewing them along a diagonal across the width of the screen. Is there a solution that'll fix this for three buttons in a row too?

Thank you!! @tuanphan 

8 hours ago, HanleyA said:

Hi, I'm having the same issue on my site and have not found a solution that works for me yet.

URL is bethamesswartz.com

password is BAS7795

On desktop the buttons for each of my pages look great, side by side. But when I go on mobile, they're far away from each other and not in line (Images of desktop vs mobile shown below). How can I fix this? 2 or 3 of my pages have three buttons instead of two and it does the same thing, skewing them along a diagonal across the width of the screen. Is there a solution that'll fix this for three buttons in a row too?

Thank you!! @tuanphan 

Use this code

@media screen and (max-width:640px) {
div#page-6108bd15b71b5f760191edda .span-12 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

On 7/10/2022 at 11:31 PM, tuanphan said:

Use this code

@media screen and (max-width:640px) {
div#page-6108bd15b71b5f760191edda .span-12 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Thank you! But that code didn't seem to work. I put it in Design > Custom CSS.

7 hours ago, HanleyA said:

Thank you! But that code didn't seem to work. I put it in Design > Custom CSS.

The code works when you post this question. But now you added button 3, so it won't work.

Use this new code

@media screen and (max-width:640px) {
div#page-6108bd15b71b5f760191edda .span-12 .span-4 {
    width: 33.333% !important;
    float: left !important;
}
    div#page-6108bd15b71b5f760191edda .span-12 .span-4 .button-block {
        padding: 5px !important;
    }
}

This code works with 3 buttons, if you add button 4, 5, 6.. or remove a button, it won't work.