Headline container shrinks on mobile - how to fix?

[Harrington]

Hi,
I cannot figure out why headline on mobile sort of jumps above container with see-through background compared to tablet (no difference in setup I can find):

Here is tablet view:

Help!
Irina

[ruenel]

Hello Irina,

Thanks for writing in! You are having this issue because you have added this custom inline element CSS in the container element.

@media (max-width: 568px){
  $elx-bar-container {
    border-right: 0;
    margin-top: -82px;
  }
}

Please remove the inline element CSS code and test your header again. If you cannot find the code, please provide us access to the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Harrington]

Hi Peter,
I left you secure note - thank you!
Irina

[prakash_s]

Hello Irina,

Thanks for sharing the login details. I went ahead and checked your header settings, You need to go to the Header —>Bar 2—>Contact —>Customize—>Element CSS.

You need to remove this code or comment the margin-top code and then clear your browser cache then check again.

Thanks

[Harrington]

Hi Prakash,

Thank you!! Worked really well!

Last question about minor adjustment of extra space above title on mobile. How to make this space smaller?

Thanks again!
Irina

[prakash_s]

Hello Irina,

It seems that you have set the container margin for all the screen sizes, I would suggest you go to the Custom Header—>Bar 2—>Container —>Design —>Margin—>Click on Top —>Set the Margin top as “0” for the small screen.

Hope it helps
Thanks