How can I change the position of the banner text on MOBILE only? SAHARA theme

Store Design
, ,
1

So for Desktop - my text is on the left side. But I want to make it Centered on mobile. How can i do that?

Screen Shot 2024-11-16 at 2.12.10 AM.png
Screen Shot 2024-11-16 at 2.12.10 AM.png998×502 483 KB

1 Like
2

Hello @mayatranquila
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Hey @mayatranquila ,

To make the text centered on mobile while keeping it left-aligned on desktop, you can use CSS media queries. This will allow you to apply specific styles for smaller screen sizes.

Steps to Center the Text on Mobile:

Follow these steps:

1.Online store

  1. Themes

  2. Edit Code

  3. Locate the CSS File:

Find the CSS file, usually named theme.css or base.css, under the Assets folder.

  1. Add a Media Query for Mobile:

-Look for the class controlling the text section, like .hero__text or .hero__content.

-Add this CSS at the bottom of the file:

@media (max-width: 768px) {
    .hero__content {
        text-align: center; /* Center text on mobile */
        margin: 0 auto;    /* Optional: Ensure it's fully centered */
    }
}

Preview the site on a mobile device or resize your browser window to check how it looks

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

4

Hi @mayatranquila

Can you share with me the store URL to check further?

Thank you

5

Hi @mayatranquila

Can you share with me your store URL with me to check further on it?