Mobile/Smartphone view is different than on a usual computer - how to fix it?

Hello everyone,

I have a issue with my homepage appearance. As you can see here (a picture I’ve downloaded)

https://postimg.org/image/xiln3axw3/

shows a cut between my background image and my logo/font.

On my webpage www.lifeofnino.com if you are using the common desktop view from your computer you can see that the logo/font hovers over the image. What can I do to fix this so I get the same appearance on my smartphone?

Thank you so much in advance

Hello Samparisi,

That’s default behavior on low resolutions.

The only issue that I see is that mobile menu button is invisible, it’s white on white background.

Please try to use the following CSS code in order to make it visible.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

header#masthead div.btn-menu {
    color: #5087bf;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hello Roman,

thank you so much for your answer and especially for the coding. The menu button is now visible. Unfortunately it is still cut off.

https://postimg.org/image/mmrjnd659/

Is it possible to have a mobile view just like here…

https://postimg.org/image/6nnx346cl/

Thank you already for your help!

You are welcome!

It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

P. S.
You can check Sydney Demo site in order to make sure that its mobile header works just like header on your website.