Mobile layout issues – Wide Content – Hemmingway Rewritten
-
Hi, I’m having problems with my site on iOS and Android mobiles.
I will have a comparison table in a post I do each weekend – it is quite wide, about 850 pixels. Works fine on desktop but on iOS (iPod Touch) the site width is equal to the table but the header, copy, and footer are all only a third of the width of the site width ie the site is mostly white space with a table. On Android mobile the problem is different but related – the default screen is zoomed in to the header, copy and footer, so appears OK, but when you go down to the table, you have to scroll to the right to see all of it’s contents – if you scroll back up you see the same problem – the pages actual width is about 3x the size of the header, copy and footer.I thought this problem didn’t exist in preview but it actually does (in the android form) so it should be easy to check – the offending table is the last post I made, so it’s right on the home page.
I’ve worked out how to bring the table down to the default max theme width – 676 – mentioned in customize mode without making the contents too squashed. This fixes the problem on tablet preview – but it is still a issue on mobile. Ideally’ I’d like the mobile version to be identical to tablet preview just a little zoomed out – ie all the content – header, copy, table, footer fits the width of the screen. Current version is very large on mobile anyway – I think we can sacrifice some size/zoom there without adversely affecting legibility.
is there anyway of accomplishing this via a CSS snippet?
I’ve had to stop promoting my site til I get this fixed – if someone could please help out that would be much appreciated.The blog I need help with is: (visible only to logged in users)
-
The mobile ready theme is a default theme and a completely different theme that you do not need to enable if your theme is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/
The mobile default theme is provided for those who run older themes that aren’t the gold standard which is 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 >Dashboard > 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/
-
is there anyway of accomplishing this via a CSS snippet?
I’ve had to stop promoting my site til I get this fixed – if someone could please help out that would be much appreciated.We bloggers do not have access to the template files underlying our themes on wordpress.COM hosted blogs and cannot edit them. This is a multiuser blogging platform. All blogs wearing the same theme use the same underlying template found on the live demo site for each theme.
Does Customize let me edit HTML?
No. Customize allows you to edit fonts, colors, and CSS only. You can change the appearance of a theme, but not its HTML markup or PHP code. If you require this functionality, please consider moving your blog to a web host that supports theme code modifications. You can read more about why here http://support.wordpress.com/code/, and find a suitable host here http://get.wp.com/hosting/.
Custom design – Frequently Asked Questions http://en.support.wordpress.com/custom-design/#frequently-asked-questionsSee here for details on purchasing the annually renewable Premium bundle http://store.wordpress.com/plans/premium/ that contains a custom design upgrade required for CSS editing:
Custom design – Frequently Asked Questions such as: I’m not sure if Customize is right for me. Can I try before I buy?
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/
Note 1: Once you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.
Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing. -
Hi, I can’t find Hemingway Rewritten in responsive themes so I guess it’s not one. Also, I am a premium customer. Support have requested I post in this forum so I have. Thanks for trying to help.
-
Hmmmm … I thought is was a responsive layout theme. If you want Staff help in this Themes forum you have to type modlook into the sidebar tags on this thread for a Staff follow-up. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then you subscribe to the thread so you are notified when they respond and be patient while waiting. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.
-
Hi once again, thanks for trying to help – but as a paying customer who notified support nearly 12 hours ago with a live problem on a site that was experiencing high traffic – I find the tone of your replies and especially ‘be patient’ rather presumptive and rude. I am subscribed to the thread. Thanks for tagging modlook. Have a nice day.
-
*Edit. Apologies – my mistake I have found Hemingway Rewritten in responsive themes. I will try the fix you posted first and see if that works.
-
-
As far as being presumptive and rude goes you have got to be kidding. I have patiently and kindly volunteered to answer questions here for over 10 years. I predate all but one support staff member even being on staff and I predate all support documentation.
What’s required by everyone posting here is patience as Staff work through all forum threads tagged for their attention and through all email support tickets in chronological order based on datestamps and timestamps – first posted first served, as would be expected.
How long it takes to clear the threads and support tickets depends on how many Happiness Engineers are working on them at any given point in time, and how many tagged threads and tickets there are. It also depends on how complex the issues in each thread and ticket are are.
Though I am tempted to boot you through the goal posts of reality I won’t insult your intelligence by responding to the have a nice day sarcasm.
-
It wasn’t sarcasm. A) You presumed I had mobile theme enabled B) You presumed I wasn’t a premium customer C) You presumed I wasn’t being patient (twice now), despite me notifying support about my problem 12 hours ago … but don’t worry, you weren’t being presumptuous or rude. (That was sarcasm).
-
Hi there,
It looks like you’ve since been helped by Jerry and Kristen via chat and email. You’re welcome to reply to Kristen directly if you still need help with this, but let me know here as well if I can help.
If you still need help with your thread in the CSS forum (https://en.forums.wordpress.com/topic/responsive-table-on-mobile) please be patient while waiting for one of our CSS volunteers or staff to reply. If you no longer need help with that, let me know and I’d be happy to set that thread to resolved for you.
-
Hi Kokkieh,
Thanks for getting back to me – yes Jerry and Kristen were great! I think I marked the CSS thread resolved already? I am still having one minor issue – on mobile screens less than 360 pixels my site title is off centre and protrudes from the black box it’s supposed to live in. Is it possible to specify a shorter title in this case, similar to what I’ve worked out with having scrolling tables on screens smaller than 600? Or if not, any other way of fixing? Here’s an example on a iPhone 5 emualtor.Cheers.
-
Adding a rule to the media query you already have should do the trick. Edit the first bit of CSS you have in the Customizer so it looks like this.
@media screen and (max-width: 550px) { table { overflow-x: auto; display: block; } h1.site-title a { font-size: 90%; } }But this is probably also something that needs to be fixed on the theme level, so I’ll make sure it’s reported as well.
-
-
Hello!
I’m following up to let you know that the site title issue on mobile has been fixed in the theme, too. Thank you for reporting this issue!
- The topic ‘Mobile layout issues – Wide Content – Hemmingway Rewritten’ is closed to new replies.
WordPress.com Forums 