Title: Mobile version problems
Last modified: August 31, 2016

---

# Mobile version problems

 *  Resolved [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/)
 * This website
    anniephillips.co.uk/Wordpress/ on mobile devices (eg Safari on 
   iPhone) has two issues: 1) the Menu, when clicked on, does not display the links,
   excpt the top one, or, if it does, there is a huge amount of vertical space between
   each menu item. 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. Grateful for any help.

Viewing 14 replies - 1 through 14 (of 14 total)

 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421344)
 * 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](https://jetpack.com/support/custom-css/).
   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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
   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.
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421360)
 * Thanks, v. helpful. I will look at this on Monday now.
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421374)
 * Sounds good! Let us know how you get on with that.
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421603)
 * Hi Siobhan. Sorry its been a busy week and I only just got around to doing this.
   The second idea worked for the front page images. The first idea for the menu
   hasn’t worked. I followed the instructions but in the edit.css window when I 
   save, the system removes the following part of the code automatically: ‘ height:
   25px;
    margin-top: 5px; padding-bottom: 10px;’ leaving: ‘@media screen and (min-
   width: 768px) .main-navigation {
 * }
 * Any ideas?
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421605)
 * There’s a little typo on the code and it’s just missing the opening curly brace.
   Try this:
 *     ```
       @media screen and (min-width: 768px) {
         .main-navigation {
           height: 25px;
           margin-top: 5px;
           padding-bottom: 10px;
         }
       }
       ```
   
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421606)
 * Thanks. Have implemented that and will look at it on a mob device tomorrow
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421608)
 * Hi Siobhan. No, sorry to say that didn’t fix the problem, there is still a large
   gap between the menu items. Thanks for you kind attention to this issue!
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421614)
 * Hi there,
 * Could you please try replacing **height: 25px;** with **min-height: 25px;** in
   the snippet I gave you?
 * Like so:
 *     ```
       @media screen and (min-width: 768px) {
         .main-navigation {
           min-height: 25px;
           margin-top: 5px;
           padding-bottom: 10px;
         }
       }
       ```
   
 * Thanks!
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421617)
 * Hi Siobhan, thanks for the tip, but that actually made it worse: only the top
   menu item is visible now. Also, (and this was always the case) the mob version
   of the nav menu doesn’t pick up the colors of the desktop version resulting in
   white text on a white background, which is hard to see!! Any ideas why? See: 
   anniephillips.co.uk/Wordpress/
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421624)
 * Hi again,
 * Could you please replace **min-height: 25px;** with **height: auto;** this time?
 * Thank you for all of your patience, also. This is very tricky to help with as
   the changes are working on my end while testing in my browser.
 * Let me know how you get on with that last suggestion.
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421627)
 * I did this. Under MENU I can see ‘Home’ in grey, but no other links. I will consult
   with the client. I am using an iPhone 4. Maybe it works on later iPhones or other
   devices.
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421632)
 * We looked on an iPhone 5. It is the same.
    And yet the Selademo on this phone
   correctly shows menu with drop-downs. What is the difference?
 *  Thread Starter [cyberium](https://wordpress.org/support/users/cyberium/)
 * (@cyberium)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421633)
 * OK, I found the difference: some CSS added to the main-navigation class in the
   style.css file: height:25px; margin-top:5px; padding-bottom:10px; background-
   color:#a7a7a7;. I deleted this and it works fine now. My fault. Thanks for your
   help.
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421635)
 * [@cyberium](https://wordpress.org/support/users/cyberium/): I’m so glad you were
   able to pinpoint the issue here. I tested your site on my mobile and your menu
   appears to work perfectly now. 🙂 Feel free to open up a new thread if you have
   any extra questions.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Mobile version problems’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/sela/1.0.17/screenshot.png)
 * Sela
 * [Support Threads](https://wordpress.org/support/theme/sela/)
 * [Active Topics](https://wordpress.org/support/theme/sela/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/sela/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/sela/reviews/)

## Tags

 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 14 replies
 * 3 participants
 * Last reply from: [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/mobile-version-problems-1/#post-7421635)
 * Status: resolved