Reposition and reduce size of text on Image Banner for Mobile

[Lizzo333]

Hi there!

I'm using Spotlight theme. 

My URL is www.outerlayer.com.au

On the homepage banner on Mobile, I would like to:

1. Reduce the size of the Header text (ideally to fit on the one line)

2. Reduce the size of the Body text 

3. Position the Header text, Body text and Button down 

Thanks so much for your help!

LIzzy 

[LizHoang]

Hi @Lizzo333  I dont see the text and button 

[Lizzo333]

Hey @LizHoang – ah my apologies, I just realised that it wasn't displaying correctly on live site.

I had added some custom code to try and increase the image banner height on mobile with text overlaid – but it broke something. 

I've fixed and it should look like this now:

I want it to look like is:

An example of the image banner depth I'm referring to is below (https://honorthegift.co/)

Thanks so much!

Lizzy

[DaisyVo]

Hi @Lizzo333 

Let me ask you are trying to solve the problem on desktop, mobile or tablet

[topnewyork]

Hi @Lizzo333 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media (max-width: 768px){
 .header__icon .icon {
    height: 1.5rem !important;
    width: 1.5rem !important;
}
.header__icon--cart .icon {
    height: 3rem !important;
    width: 3rem !important;
}
.header__heading-logo {
    max-width: 80% !important;
}
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!