1

my question concerns this website (currently on my staging server): https://sunstonebookkeeping.markhannondesign.com

The theme is a child theme of a parent theme I created with Underscores and Bootstrap. I am getting some odd behavior when I view the website on my phone. See the screenshot below.

Screenshot from Chrome Developer tools

If I click another page in the menu, the website corrects itself and fits properly on the screen. However when I turn my phone to landscape, the full-size desktop version loads. Again, when I click another page in the menu, the website resizes itself to properly fit the screen.

Any idea what is causing this?

closed as off-topic by fuxia Aug 20 at 21:45

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

Your primary menu container is set to left: 5000px; witch stretches the width of the page. You can find this style directive in ...themes/sunstone-bookkeeping/css/mobile.css on line 66.

@media screen and (max-width: 600px)
.nav-menu {
    position: absolute;
    left: 5000px;
}

One way to fix this is to add the following styles to the parent element:

.menu-menu-1-container {
    position: relative;
    overflow-x: hidden;
}

This solution shouldn't mess with other styles.

The proper way of applying this kind of changes is described here: child themes. In the style.css file of your child theme you can safely add the solution that I proposed. Cheers!

  • 1
    Thanks. I was beginning to suspect the absolute positioning as the culprit. Appreciate the simple solution. – figure2 Aug 22 at 14:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.