Preview for phone looks different to actual phone
-
The preview for phone looks different to what the website looks like on my phone.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
That is because you have the default mobile theme activated, here:
https://lizmartinresearch.wordpress.com/wp-admin/themes.php?page=mobile-options
That theme exists so people with sites that are not mobile-responsive can still have a site that works properly on mobile. However, your theme, Adventure, is already responsive so you don’t need to use that mobile theme. Disable it at the link I gave above, and it will use your site’s actual theme on mobile devices.
-
Thanks very much. That is a great answer and solves one part of the problem. Thank you!
The other part of the problem is that even when using the Adevnture theme on a mobile, the preview and the actual are different. I can’t load images, apparently, so I’ll try to describe. On the preview on, say, my About Me page the text and photo are aligned different to their alignment on my phone.
-
That is normal. The Customizer preview uses a specific set of dimensions for a mobile screen size, but your phone’s screen likely does not use those exact same dimensions, so there’s bound to be some difference. The specific browser you use on your phone can also influence this, as browsers are not identical in how they interpret the the CSS code that tells your website how to look.
So you’ll never have an exact match between the Customizer preview and the actual mobile view.
On the preview on, say, my About Me page the text and photo are aligned different to their alignment on my phone.
Actually the alignment is no different than in the desktop version – first photo right-aligned, and second left – but in the mobile preview the photo takes up the entire width of the screen so there’s no space next to the image for the text to wrap around. But on a mobile screen with a higher width than the preview window there is space for the text to wrap around.
It’s possible to override this behaviour with custom CSS and, for example, change the image alignment only for mobile screens to have no text wrapping, but that requires the Premium or Business Plan upgrade.
-
See, when I check the mobile preview the photo is right-aligned (same as desktop) but there is room for text on the left. Odd that your preview and my preview should be different.
On my phone, there is less room for text on the left than in the preview. There is five words over four lines in the top left over followed by a large gap before the text starts again after the photo.
The alignment setting is the same, I agree. I chose the wrong decriptor, sorry. The *text wrapping* is variable, resulting in – on my phone – some odd text wrapping.
My question, then, is custom CSS the only way to prevent dodgey text wrapping?
Thanks for your help!
-
Odd that your preview and my preview should be different
Are you speaking of the Customizer preview? The first image at the link below is what I see in the Customizer using the Firefox browser. The second is what I see using the mobile view tool built into the Chrome browser’s dev tools, i.e. that’s not a preview but your actual site as viewed in Chrome. The third is Chrome on my phone.
https://cloudup.com/cf8LdEcvaqO
They’re all different, as they’re at different screen sizes, and there might even be slight variation from one browser to another as I explained above. So it’s actually normal that they’re not the same. And in this case even the width of a single letter makes a noticeable difference.
> My question, then, is custom CSS the only way to prevent dodgey text wrapping?
It’s the most reliable way. But in this case it might also help to resize your images on that page so they’re just slightly larger than most mobile screens. That way they should always fill the full width of the screen on mobiles.
I think an image width of around 300 pixels should do the trick, and it shouldn’t make too huge a difference in the desktop layout. It might take some trial and error to get it right though, and you might find it works at a slightly smaller width.
-
Very helpful. Thanks. I’ll change the image width and hope it’s only funny on my set of phone/browser/versions, etc.
Not sure how to mark an issue as resolved? But consider this resolved. Thanks again, for you help.
-
- The topic ‘Preview for phone looks different to actual phone’ is closed to new replies.
WordPress.com Forums 