Hi there,
1) the Menu, when clicked on, does not display the links, except the top one, or, if it does, there is a huge amount of vertical space between each menu item.
I can see that some inline CSS has been added directly to your main menu:
<nav id="site-navigation" style="height:25px; margin-top:5px; padding-bottom:10px; background-color:#a7a7a7;" class="main-navigation" role="navigation">
The inline CSS is the cause of the issue on mobile. Could you please remove style=”height:25px; margin-top:5px; padding-bottom:10px; background-color:#a7a7a7;” from the code? CSS should be added via a separate stylesheet, as this gives us some more control and room to customise your site based on the size of your screen.
As you have Jetpack active on your site, I recommend navigating to Jetpack > Settings and activating its Custom CSS module. CSS can then be added via Appearance > Edit CSS.
Enter the following snippet to the CSS editor to replicate the look you created for your menu:
.main-navigation, .menu-toggle {
background-color: #a7a7a7;
}
@media screen and (min-width: 768px)
.main-navigation {
height: 25px;
margin-top: 5px;
padding-bottom: 10px;
}
}
The above snippet includes a media query that targets devices that are 768px in width or more and only applies the changes in the menu’s height and padding to them. This means that the menu will be sized correctly and work as expected on smaller devices.
2) when using a page template which has rows of images such as the front page template, in mobile view the images remain in a row instead of gracefully falling beneath each other, and they fall way outside the text area to the right, but because they all show on the device’s screen width, the text area is very small and unreadable.
I can see that, at the moment, you have added some custom HTML in order to create your three images. I would instead use the theme’s built in widgets.
If you set the Front Page template to your home page, you can then navigate to Appearance > Widgets in your admin area and add Text widgets to each of the three Front Page areas. HTML can be added directly to the Text widgets.
The widgets that are added to those three areas will automatically line up nicely and adjust based on the size of the screen they’re being viewed on.
Let me know how you get on with those steps. I’ll be happy to help further if needed.
