Need to fix how site displays on mobile devices.

plintj · Member · Nov 19, 2015 at 4:10 am
Copy link

Add topic to favorites
I have a applied some CSS to the “Visual” theme and am happy with the desktop view. However I need to fix the mobile view so that it displays a single column of content. I know it’s probably displaying as per my CSS calls but not sure how to fix this for mobile only. I have no plugins such as jetpack etc.

The blog I need help with is: (visible only to logged in users)
timethief · Member · Nov 19, 2015 at 4:12 am
Copy link
The mobile ready theme is default and a completely different theme that you do not need to enable at all, if Visual is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme

You can read more in the support docs at https://en.support.wordpress.com/themes/mobile-themes/

You can test your site at this link https://www.google.com/webmasters/tools/mobile-friendly/
plintj · Member · Nov 19, 2015 at 4:30 am
Copy link
Thanks timethief,

“If you would like to disable mobile themes on your blog, go to Appearance → Mobile in the Dashboard and select “No” for “Enable mobile theme” option.”

I can’t see this option in my UI. I’m using the web UI?
plintj · Member · Nov 19, 2015 at 11:04 am
Copy link
My “visual” theme supports responsive layout however I can’t see where to I disable mobile themes. I’ve read the above documentation. Does this assume I’ve installed the WordPress application? At the moment I’m using the web-based UI.
thesacredpath · Member · Nov 19, 2015 at 10:41 pm
Copy link
Hi, due to the way the theme resizes and changes the display for narrower screens/windows, let’s delete the following two CSS rules and move them into a Media Query set to return things to the original design at the point that it drops to two columns.
```
#content {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    padding: 15px 15px 25px;
}
.masonry .hentry {
    width: 31%;
}
```
The following would be the new CSS. Place it at the very bottom of your custom CSS.
```
@media screen and (min-width: 1003px) {
	.masonry .hentry {
		width: 31%;
	}
	#content {
		border: 1px solid #ccc;
		background: #fff;
		padding: 15px 15px 15px;
	}
}
```
Let me know what you think.
plintj · Member · Nov 19, 2015 at 11:12 pm
Copy link
Many thanks @thesacredpath I will try this. I couldn’t access my dashboard (doesn’t appear when I login) to turn off the mobile theme, however I guessed the url and now it’s bookmarked. So I’ve disabled the mobile theme and it’s OK, however I will try your CCS suggestion. Thanks again!
thesacredpath · Member · Nov 20, 2015 at 2:32 am
Copy link
You are welcome and let us know if you have any issues or additional questions.

No items found.