Solved

Changing Header Size When CSS Is Already Applied

Hikomizubags
Tourist
13 0 0

I have been trying to change my Header so that it doesn't look squished when I go to phone mode. This is it in desktop...

Hikomizubags_0-1695505352131.png

 

And here it is in phone

Hikomizubags_1-1695505352309.png

 

I am using the sense theme and already have a lot of CSS applied to the header in base.css which is shown below. Any help is appreciated!

Hikomizubags_2-1695505352084.png

 I would love for there to be a margin of around 65 pixels between the header and the image banner below. I have tried to add that but the background starts peaking through. I have pasted an image below to show you what I mean...

Hikomizubags_3-1695505442147.png

 

So ideally, the pink part wouldn't be there and would be transparent and in turn this would be what I would want it to look like

 

 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4079 912 1564

This is an accepted solution.

Hi @Hikomizubags 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media(max-width: 767px){
.banner__box {
    padding: 12rem 3.5rem !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Reply 1 (1)

PageFly-Richard
Shopify Partner
4079 912 1564

This is an accepted solution.

Hi @Hikomizubags 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media(max-width: 767px){
.banner__box {
    padding: 12rem 3.5rem !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.