How can I center align text on a mobile screen?

Store Design
,
1

화면 캡처 2023-05-06 195911.png
화면 캡처 2023-05-06 195911.png475×425 19.6 KB

I want the letters in all three sections here to be center aligned. It’s a mobile screen and I want to center align only on mobile. How can I do it ?

my website is lgbtqstyles.com // mohtse

2

Hello @swoo0105

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.image-with-text__content {
  align-items: center;
 }
 .image-with-text__content--mobile-right>* {
    align-self: center ! important;
    text-align: center !important;
}
h2.image-with-text__heading.h1 {
    text-align: center;
}
.image-with-text__text.rte.body {
    text-align: center;
}
3

Try this code:

/* Default styling for desktop screens */
.section-text {
  text-align: left;
}

/* Media query for mobile screens */
@media (max-width: 767px) {
  .section-text {
    text-align: center;
  }
}
4

@swoo0105

Please add the following code at the bottom of your css code.

@media screen and (max-width: 749px) {
h2.image-with-text__heading.h1{
align-self: center;
}
.image-with-text__content>*+*{
text-align:center;
}
.image-with-text__content .image-with-text__text+.button{
align-self: center;
}
}
1 Like