[Resolved] Centered Image not behaving on iPhone

[Marcia]

Oh my home page, there is a centered image that looks fine everywhere but on an iPhone. When I load that page in portrait, the large image is sort of flush right off the edge. When I switch to landscape, the whole page loads, but the image is teeny tiny and centered.

I’m sure it’s something simple, but I’m baffled.

[Tom]

Hi there,

Instead of using margin here:

.entry-content>:last-child {
    margin-left: 250px;
    text-align: left;
    margin-right: 250px;
    color: #930026;
    font-family: Tahoma,Geneva,sans-serif;
}

Try adding this:

.home .entry-content {
    max-width: 500px;
    margin: 0 auto;
}

[Marcia]

I tried that and no image showed up at all in my mac’s browser. I took out the extraneous coding from my original .entry-content coding and that didn’t help either.

Do I need to add media queries or some such? A bit of a newbie here…

Cheers,
MG

[Leo]

Hmm Tom’s solution should work however I still see the original CSS being added.

Can you remove it so we can see the result?

[Marcia]

Okay. Just changed it to Tom’s code and commented out the old. On my iMac screen here at work, there is no square image of someone holding a violin.

[Leo]

I still see this CSS being added:

.entry-content>:last-child {
    margin-left: 250px;
    text-align: left;
    margin-right: 250px;
    color: #930026;
    font-family: Tahoma,Geneva,sans-serif;
}

Here is where the code is if you can’t find it: https://s18.postimg.org/em6wlf9gp/2018-01-17_1741.png

[Marcia]

That’s it! Of course I have no idea how that coding was put in there, but as long as it works.

You guys are great and I can’t thank you enough.

Cheers,
MG

[Leo]

Glad we could help!

[Author]

Posts