Overlap problem on Mobile version Home Page

Dear community

as you probably know by now, my website is: https://cphagen.com/

I have a problem with my header/banner on mobile phones.

As you can see on the image here:

The arrow for skipping to the next section is totally overlapping the '‘Shop now!’ button :disappointed_face:

Can you help me:

  1. Separate the two.

  2. Reduce a little bit the font size only for the mobile version of my website, so that ‘‘Normann Copenhagen’’, for example, can be on one line only.

Thank you very much!!! :slightly_smiling_face:

Good day

@CPHAGEN_Nordic - will this be ok?

1 Like

@CPHAGEN_Nordic - if yes then please add this given css to the very end of your theme.min.css file and check

@media screen and (max-width:749px){
#shopify-section-header .banner h2{margin-bottom: 0; font-size: 1.5rem;}
}
1 Like

Better but… Could we make the text slightly bigger than that?
Still keeping ‘Normann Copenhagen’ only in one line!

And, a white border on the ‘Shop now’ button? :slightly_smiling_face:

Mobile only, please!

Thank you sooo much :grinning_face_with_smiling_eyes:

@CPHAGEN_Nordic - try this

@media screen and (max-width:749px){
#shopify-section-header .banner .inline-block{width: 100%;}
#shopify-section-header .banner h2{margin-bottom: 0; font-size: 2rem;}
#shopify-section-header .banner .mt2{border: 1px solid #fff;}
}

1 Like

The arrow is still very close to the button, but it’s better…
Any idea to force more space between the white arrow and the button?

Thank you very much for your help!!!

@CPHAGEN_Nordic - make that 80% again 100 please, thats the only way

1 Like

Thank you very very much!!! :slightly_smiling_face: