Archived topic

I need help with images on Mobile

1 reply · Started by Richard on May 20, 2020

Viewing posts 1–2 of 2

May 20, 2020 at 10:40 pm #1294792

I am having problems with the picture staying within the container on mobile devices.

I make sure that my images are centered, they look fine on the desktop. The problem is in mobile it breaks the container, and looks like it is wider on the right side.

I have a border around my pictures too, which looks fine on desktop. Ideally, I would like the picture to be centered in the container with the border, and padding on both sides.

I haven't been able to figure out how to make this happen in GeneratePress Premium. I have tried multiple mobile options, but it doesn't seem to fix the problem. I've been trying to see if there is any CSS that can fix it, but haven't been able to find any.

Any suggestions would be helpful, thanks.

May 21, 2020 at 1:09 am #1294936

Hi there,

change this CSS:

.entry-content img, .featured-image img {
    border: 10px solid #eee;
}

to:

.entry-content img, .featured-image img {
    border: 10px solid #eee;
    box-sizing: border-box;
}

This archived topic is closed to new replies.

Start building better websites today.