How can I center text under a button banner image for both desktop and mobile?

[ArthurP]

Hi,

I’m trying to get some text under the button of a banner image (most recent update of the Dawn theme), as seen in the image. Link to website: https://thegiftfull.myshopify.com (pw: skiwei).

Currently I tried something with the inbuilt text-blocks for the banner section. I changed some css to match the style I’m looking for, which is:

.caption-with-letter-spacing {
  font-size: 1.2rem !important;
  text-align: center;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: none;
  margin-top: 0.8rem !important;
  max-width: 22rem;
  min-width: 22rem;
}

Although this makes the text look fine, and ‘centers’ it under the button for desktop, it isn’t centered under the button for mobile and tablet. Also, I did these CSS-customizations inside the CSS-selector for the banner image only, since changing the .caption-with-letter-spacing in the base.css file would change everything, which I am trying to avoid.

Any help to get this done, both for desktop and mobile, is much appreciated.

[Dan-From-Ryviu]

Hi @ArthurP , you can add this code to make it center on mobile too

@media only screen and (max-width: 600px) {
#shopify-section-template--18464516866394__image_banner .caption-with-letter-spacing { margin-left: 4rem; 
}
}

[ArthurP]

Works like a charm! Thank you!

[Dan-From-Ryviu]

You are very welcome.