How to move text to the center of the page on mobile

Store Design
, , , , , , , , ,
1

Hi, how can I align this text to the center of the page?

CreatorTim_0-1737064556376.png
CreatorTim_0-1737064556376.png385×837 53.4 KB

I want the text and button to stay left-aligned, but just move them more towards the center so they’re positioned below the image.

Here’s my store: https://1049xn-ya.myshopify.com/

AND I ONLY WANT THIS FOR MOBILE!

Thanks a lot,
Tim

1 Like
2

Hi @CreatorTim

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 400px){
h2.image-with-text__heading.inline-richtext.h1 {
    padding: 0 20px;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @CreatorTim

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.image-with-text__text-item.grid__item h2 {
    text-align: center !important;
}
}

image (2).png
image (2).png359×459 29 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

Hey, thanks, but how can I move the button below the text as well?