Center slideshow text and button on tablet and mobile

https://www.grdowntownmarket.com/
Site password: Market1234

I'm trying to center the homepage slide show text and button for tablet and mobile, but here's the catch: I want it centered as soon as it snaps to the tablet width and stay centered the entire time you continue to resize your browser window.

Any help would be appreciated!

Can you share your website URL and the page this gallery is on?

@Ziggy Added to the original post! Thanks!

@media only screen and (max-width:900px) {
  .slide-content {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .user-items-list-banner-slideshow[data-title-alignment="left"] .list-item-content__title, .user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container {
    text-align:left !important;
  }
}

Let me know how that goes.

@Ziggy Close but it's still off. Trying to have the text container and button centered in the window at all times other than desktop view.

I appreciate your help!

@Ziggy

Things are still off-center. Any idea why?

desktop (good), tablet, and mobile screenshots are attached!

That's really strange, it doesn't seem to be accepting the CSS correctly, and I'm not sure why. Do you have other CSS in your Custom CSS that might be affecting this?

@Ziggy I have a TON of custom CSS going on so I will take a look and see if there are conflicts! Thanks!

@Ziggy

I think I figured it out! Thanks for all your help!

Can you share your fix? I'm having what I believe to be a similar issue. Using the updated code above, this is how mine is looking (attached).

On 9/18/2024 at 10:11 PM, sunicreative said:

Can you share your fix? I'm having what I believe to be a similar issue. Using the updated code above, this is how mine is looking (attached).

Can you share link to this page? We can check easier

Yes the page link is https://mbinteriors.ca/press (mobile). I changed it back to left align for now because it looked stupid centred but off-centred. 

On 9/21/2024 at 5:41 PM, sunicreative said:

Yes the page link is https://mbinteriors.ca/press (mobile). I changed it back to left align for now because it looked stupid centred but off-centred. 

You can use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
    section[data-section-id="646521fab7a9d93a9f32bd00"] li * {
        text-align: center !important;
        justify-content: center !important;
    }
      section[data-section-id="646521fab7a9d93a9f32bd00"] .list-item-content * {
          max-width: 100% !important;
      }
}