How to adjust mobile slideshow text alignment on Lorenza 3.1.1 theme?

Store Design
,
1

Hi there, I need help on my site - woodhousespas.com.

The desktop version is fine, but I need the text on my hero slideshow to shift down to the bottom so it’s not covering the image! I tried following another recommendation of adding custom code to “base.css” and another one that recommended adding code to “theme.css” but I don’t have either of those file options..

The theme we are working with is Lorenza 3.1.1.

Woodhouse – Woodhouse Spas.jpeg
Woodhouse – Woodhouse Spas.jpeg1284×2778 207 KB

Thank you so much in advance!

Glory

1 Like
2

Hi @glorykwilliams

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

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: 607px){
.slideshow__content-wrap--middle {
    justify-content: flex-end;
}
}

If this one wont work add !important;

@media only screen and (max-width: 607px){
.slideshow__content-wrap--middle {
    justify-content: flex-end !important;
}
}

And Save.

Result:

Made4uoRibe_0-1705332988446.png
Made4uoRibe_0-1705332988446.png406×801 246 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hey @glorykwilliams ,

Please follow the following steps

  1. Go to your online store and select Themes from left panel

  2. Press 3 dots menu in center (on the left of Customize button) and then Edit Code

  3. Open the file (base.css OR theme.css OR index.css OR any other css or scss file) (you can search for scss or css)

Add this code block at end of the file

@media(max-width: 768px) {

.slideshow__content-wrap–middle {
justify-content: end;

}
}

Thanks
Yash Garg

1 Like