How can I align and resize text in a banner?

Store Design
1

Hello everyone,

I would like to align the text in this banner. Currently, it is centered, and I would like it to be at the bottom. Additionally, I would appreciate the ability to reduce the text size. I’ve seen similar threads, but the solutions provided didn’t work.

Could you help me?

Thank you

https://lauveaboutique.com/

lvbtq13_0-1706539941096.png
lvbtq13_0-1706539941096.png360×339 132 KB

1 Like
2
  1. Go to online store
  2. Click on customize
  3. Go to the banner section and to the right section at the bottom to custom css
  4. Paste the below code and save

.banner–desktop-transparent .banner__box {top: 40% !important;}
h1 {font-size: calc(var(–font-heading-scale) * 3rem);}

1 Like
3

Hi @lvbtq13

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:

div#Banner-template--20346983416148__image_banner_mjpDRG .banner__box {
   align-self: flex-end; 
}
@media only screen and (min-width: 749px){
div#Banner-template--20346983416148__image_banner_mjpDRG .banner__box {
   padding-bottom: 0px;
}
}

And Save.

Result:

Made4uoRibe_0-1706540825980.png
Made4uoRibe_0-1706540825980.png1526×546 590 KB

Made4uoRibe_1-1706540839094.png
Made4uoRibe_1-1706540839094.png511×418 190 KB

For the text size. What size you have in mind? It would be same size on the desktop and mobile? And which text you like to reduce? the titles or the subtitle? Please, clarify and specifiy. Thanks!

2 Likes
4

Hello, thanks!

it worked for the desktop version, but for mobile version is always the same, do i have to add something in the code?

thanks :slightly_smiling_face:

5

Hi @lvbtq13

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

section#shopify-section-template–20346983416148__image_banner_mjpDRG h2 span {

font-size: 20px !important;

}

section#shopify-section-template–20346983416148__image_banner_mjpDRG .banner__box.color-background-1 {padding-top: 150px !important;padding-bottom: 0 !important;}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

2 Likes
6

thank you : )

1 Like
7

You are welcome @lvbtq13 :blush:

8

Hello, this kind of worked for me. Its now sitting at the bottom center. How would i move it to be at the bottom left of the banner? Thank you