Site does not look good on my iPhone

[Neeznoodle]

I am using the Mocha theme and checked my site today on my iPhone. Although some posts look correct, many more do not with the left side of the content completely cut off so that it cannot be seen.

An example can be seen on http://fortheloveofharry.com/bellatrix-lestrange/

What can I do to correct this?

[davidzack]

Look in your css for:

.sidebar-content #content

And remove the float:right (or change to float:none.)

It looks like the CSS file is called single.include.966b18.css. Which suggests you might have a caching plugin. If so, you may need to flush the cache after your change.

[Neeznoodle]

That corrected it. Thank you!!!

[Neeznoodle]

Actually, I was wrong. Yes, this fixed how my site looks on my iPhone, but it moved the sidebar to the bottom of my site so that it is no longer on the side when I view it on my computer. I tried both variations of your suggestion. Any other thoughts?

[davidzack]

You could wrap it in a media query, so that you only clear the float at a mobile width.

[Neeznoodle]

How would I do that?

[davidzack]

Look for the media queries in your CSS. For instance, if the breakpoint at which the site becomes full width is 488px, you'll find a query that looks something like this:

@media only screen and (max-width: 488px) {
//STYLES HERE
}

Add the condition inside that, like so:

@media only screen and (max-width: 488px) {

.sidebar-content #content { float: none; }

}

You can try placing that float clear in different @media widths to find the one that works best for you.

[Neeznoodle]

Thank you! This time the fix looks good on both my iPhone and desktop computer.

[Author]

Posts