Why does my website header appear squished on mobile view?

Store Design
, , , , , , ,
1

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-1695554168523.png
Hikomizubags_0-1695554168523.png400×236 132 KB

And here it is in phone

Hikomizubags_1-1695554168528.png
Hikomizubags_1-1695554168528.png238×400 149 KB

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-1695554168530.png
Hikomizubags_2-1695554168530.png400×332 30.8 KB

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-1695554168532.png
Hikomizubags_3-1695554168532.png400×301 85.4 KB

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

2

Hi,

Will you be able to share your store URL to be able to take a look and give you the perfect solution.

3

Thanks for replying! hikomizubags.co.uk

4

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

5
  1. Go to online store
  2. Edit Code
  3. Open your base.css file
  4. Paste the following code

/* This is to shift the banner downword */

@media only screen and (min-width: 768px) {
shopify-section-template–20350173643096__722f0191-0993-4b4c-af84-250d082b1ed0 {margin-top: 100px !important;}}

/* To change the background color of the top bar for the header pick the color varient you like*/
@media only screen and (min-width: 768px) {
.header {background-color: #2d3137 !important;}}

  1. Save.

Let me know if it work by marking it as a solution.

6

It is still not working, the hikomizu logo hasn’t been moved at all