How can I adjust the home screen text placement on mobile?

Technical Q&A
1

I am trying to adjust the mobile display of pour home screen text. The placement is fine on desktop however needs to be lower on mobile. Any tips on how to do this?

1 Like
2

@Chloeweinthal

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thank you! https://saharasoul.com/

1 Like
4

Hi there,

If I understand correctly, you want to lower the white text that is being cut off by the bottle on mobile on the background image? If so, you can target that element with CSS in the styles.css file of your theme. If you’re not comfortable with CSS you could try changing the colour of the text entirely while customizing your theme in Shopify admin. What theme are you using for the site?

5

@Chloeweinthal

thanks for url can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero__inner {
vertical-align: bottom;
    padding: 30px 0;
}
#shopify-section-hero-1 .hero__btn {
    margin-top: 0;
}
}