How can i lower my banner text on mobile? sahara theme

Store Design
1

how can i make the text a bit lower on mobile? Like move the whole text down a bit?

Screen Shot 2024-11-25 at 12.36.40 AM.png
Screen Shot 2024-11-25 at 12.36.40 AM.png514×605 325 KB

2

Hey @mayatranquila ,

To move the text down on mobile, you’ll want to adjust the CSS for the text container. Here’s how you can do it:

  1. Online Store > Themes > Edit Code.

  2. Locate your CSS file (usually named theme.css, styles.css, or base.css depending on your theme).

  3. Add the following code at the end of the CSS file:

@media only screen and (max-width: 768px) {
    .your-text-container-class { /* Replace this with the class name of your text container */
        margin-top: 20px; /* Adjust this value to move the text down */
    }
}

Make sure to replace .your-text-container-class with the actual class name of the container holding your text.

4.Adjust the margin-top value as needed.

Let me know if you need further help identifying the correct class name or any other customization!

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

3

hi, thank you, but how do i know what the actual class name of the container is?

1 Like
4

Hello @mayatranquila
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media only screen and (max-width: 749px) {
.hero-banner .hero__content {
top: 65% !important;
}
}

result

25.png
25.png425×787 452 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

not working :disappointed_face:

6

@mayatranquila ,

To find the actual class name of the text container, you can use the Inspect tool in your web browser. Here’s a step-by-step guide:

  1. Open your website on a desktop browser (Chrome, Firefox, or Safari work well).

  2. Right-click on the text area you want to move and select Inspect or Inspect Element from the context menu. This will open the Developer Tools panel.

  3. In the Elements tab, you’ll see the HTML structure of the page. Hover over different elements in the code until you see the text container highlighted on the page. This helps you locate the exact HTML element containing the text.

  4. Look for a class name in the highlighted HTML element. Class names usually start with a dot (e.g., .hero-text, .banner-text, .text-container).

  5. Once you’ve identified the class name, note it down.

For example, if you find this HTML code:


    # 30% Off Everything
    

Discount automatically applied at checkout

The class name is hero-text-container.

Use this class name in your CSS code, like so:

@media only screen and (max-width: 768px) {
    .hero-text-container {
        margin-top: 20px; /* Adjust this value to move the text down */
    }
}

After adding the code, save and refresh to see the changes. If you’re not seeing the expected effect, you may need to adjust the specificity of the CSS or check for additional classes. Let me know if you need help with this!

7

thank you for explaining, however it is not working, nothing is changing when I put in that code

8

Could you please send me your message via email? This way, we can discuss everything in more detail, and I can better understand how to help solve this for you.

Looking forward to assisting you!

Thank you!

9

Try this:-

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media only screen and (max-width: 749px) {
.hero-banner--full .hero__content {
top: 42rem !important;
}

Thanks

10

this worked, but its a little bit too low and changing the value isn’t making it go up for me, any tips??

11

add

bottom: 7rem !important;

in the code which i have provided, below top:

top: 42rem !important;

Thanks