Center Align Button on Mobile (Fluid Engine)

I am trying to center align the 'Sign Up' button in the footer of this website on mobile only (this section is fluid engine). The code below does not seem to work.

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1675639492851_7264 * {
text-align: center;
}
}

can you share url pls?

https://www.giftandcrate.com.au/

@media only screen and (max-width: 640px) {
#siteWrapper.site-wrapper .sqs-button-element--primary {
    line-height: normal;
    border-style: solid;
    margin-left: 47px;
}
}

8 hours ago, Ziggy said:

Hi @raego I would recommend firstly changing the block to take up the full 8 grid columns on mobile (you should also make it wider on desktop) this won't change the size of the button, just the block container. Then add this Custom CSS to center the button within that container:

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1675639492851_7264 {
    .sqs-block-button-container--left {
      justify-content: center;
    }
  }
}

Please let me know if that works for you!

This worked great, thank you!

3 minutes ago, raego said:

This worked great, thank you!

Looks perfect!

Hi there, I am looking for a similar solution, however I have 2 buttons, text boxes and an image that I want to stack when the responsive screen changes to the tablet widths into mobile widths.

https://www.justinjamescreative.co.uk/alternative-home-page

Any help would be amazing thank you.

Justin

3 hours ago, justinjamesclack said:

Hi there, I am looking for a similar solution, however I have 2 buttons, text boxes and an image that I want to stack when the responsive screen changes to the tablet widths into mobile widths.

 

https://www.justinjamescreative.co.uk/alternative-home-page

 

Any help would be amazing thank you.

Justin

Add this to Custom CSS

/* Fluid Engine Stacked */
 @media screen and (max-width:991px) and (min-width:768px) {
  .fe-64dc9632bd53181591fc2624>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fe-64dc9632bd53181591fc2624 {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}
    .fe-64dc9632bd53181591fc2624 .sqs-block-image .design-layout-fluid * {
    position: relative !important;
}
  }