RYU unresponsive on mobile (iPhone 6 Plus).

Hi there!

When I look at the demo site, it’s responsive, so I haven’t been able to replicate this yet. Can you share a link to your site so I can look at it directly?

Thanks!

Hi Sarah,

It’s “vainvoyager.com”

Unresponsive on Safari and Chrome on Mobile ??

Hi there, you have this hashtag in one of your posts, which is causing the issue (it’s too long and no spaces so the software doesn’t break the it).

#SleepDeprivedFromSerialDecluttering

Add the following to your CSS, which will keep this from happening.

body {
word-break: break-word;
}

Hi sacredpath,

Thank you very much for identifying this:)

When I open up the “Ryu: Stylesheet (style.css)”, I’m presented with a document full of code. Could you please tell me exactly where I should copy and paste the above?

Theme CSS: https://en-au.www.ads-software.com/themes/ryu/

I have deleted the extra-long hashtag in the interim (will re-insert once I’m able to fix the CSS)

Thank you.

I deleted the long hash-tag, but it remains unresponsive on mobile. -.-

Hmmm, scrolling down through your site’s main page, I’m still seeing a number of things that are causing issues. The above code works when added to your site with Firebug in Firefox, but I’m not seeing that code in your site CSS. When I add it, it does fix the issue, but I did notice while scrolling around that it did break a few words in post titles, so let’s use this instead.

body {
    overflow: hidden;
}

I’ve tested the above on my iPhone and it takes care of the display, but the underlying things causing it are within your posts, such as this additional hashtag: #PaddockToPlatePhilosophy. With the above CSS, it will hide part of the very long hashtags you put in with a large font size. They will be partially hidden off the right side of the screen.

I’ll just add, that you are putting those hashtags within a blockquote, which has a font size of 34px on Ryu, which is making them really long onscreen. The WordPress and theme software will try to logically break words and wrap things, but if it can’t find a logical place to break something, it will typically not break it. There aren’t any spaces, commas, semicolons or such in the hashtags, so the software can’t figure out where to break them.

I might suggest not putting them into blockquotes and instead enter them as standard text and then make them bold. That would likely fix the phone display issue, but of course that would mean that it wouldn’t pop onscreen like it does at the larger size.

Actually, scratch the above CSS solution and let’s change it to this.

#page {
overflow: hidden;
}

One of my colleagues pointed out that my original solution will prevent scrolling, which you would not want.

Okay, thank you. Where in the CSS do I need to insert the below code? And…do I still need to remove the block quotes once I do this?

#page {
overflow: hidden;
}

If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Child Themes
Child Theme creation plugins
Jetpack plugin
Custom CSS plugins

It looks like you have JetPack installed, so go to Appearance > Edit CSS, delete all the informational text in that window, and paste in the CSS and save.

If you aren’t going to be editing any of the theme php script files themselves, I would suggest using the Jetpack CSS Edit.

@sacredpath, you’re a genius! It is finally responsive on mobile.

Thank you for the clear instructions, and Happy Tuesday!

Hooray and you are welcome!