[Resolved] Phone page width

[Megan]

Hi! I’ve noticed that when viewing the website on a mobile device, the page width exceeds the size of the screen, and while the container itself is fine, this means that our sticky mobile menu is off screen.

This is an example:

1 – https://www.solofemaletravelers.club/wp-content/uploads/2020/05/100559515_244401866666093_5062887472631906304_n.png

2 – https://www.solofemaletravelers.club/wp-content/uploads/2020/05/97971198_709590789791113_4742447083733123072_n.png

You see from these screenshots that you have to swipe the phone screen to the left to be able to find the menu button.

Is there a fix for this to have the page width snap to a mobile sized device? That would be the idea fix, but if not, is there a CSS code for moving the parts of the sticky mobile more over to the left so they’re within the mobile view?

Thanks!

[David]

Hi there,

couple of issues:

1. The Connect with 60,000+ Cover Block is currently set to Wide Width.
Edit that block and you will see Wide Width is selected. Click Wide Width to disable that.

2. In Simple CSS – remove this CSS as its causing the footer to become oversized:

.inside-footer-widgets {
    display: flex;
    justify-content: center;
}

.inside-footer-widgets>div {
    flex-basis: 920px;
}

.footer-widgets {
    width: 90%;
    text-align: center;
}

I can help style the footer if you explain how you want it displayed

[Megan]

Ah fabulous thankyou – that did the trick! With the footer, I’ve managed to achieve what I wanted by utilizing the copyright field for text I wanted there instead. But is there a simple CSS code I can use or some way of adjusting the copyright so that it’s not bolded?

Thanks 🙂

[David]

Try this CSS:

.footer-bar-align-center .copyright-bar {
    font-weight: 400;
}

[Megan]

Perfect, thankyou! Wishing you a wonderful weekend 🙂

[David]

You’re welcome – you too!

[Author]

Posts