Problems with header on mobile devices

Hello,

I would like to keep the same header (a full image) for my homepage when using a mobile device. How can I do that?

Also, I’d like to remove the side bar from my front page, and to center all the content (which is now at the left of the page because of the side bar).

My website www.georginameson.com is under construction. Do you need my admin password?

Thank you very much in advanced,

Georgina

From your side dashboard, visit Appearance > Customize > Header area > Header Slider; scroll down until you find the option that reads “Slider mobile behavior”, and enable Full screen.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) and (max-width: 1024px) {
      
      #primary.col-md-9,
      #secondary.col-md-3{
        float: none;
        margin-left: auto;
        margin-right: auto;
      }
      
      #secondary.col-md-3 {
        width: 75%;
      }
      
    } 

Regards,
Kharis

Thank you very much, Kharis.

The full screen option for mobile devices worked great! thanks a lot. Is
there any chance I can place the menu botton next to the website title
instead of underneath?

The CSS code didn’t work out, I still have everything placed a the left of
the website.

best regards,

Georgina

Hello Georgina,

Try the CSS code solution I’ve posted here in this thread: Icon drop down menu om desktop

Regards,
Kharis