Managing Photos on Mobile to Stretch the Container Width

[Mark]

On mobile-only, is there a way to make my added media images in the body of posts stretch the container? I create all of my post images and they will eventually be the same size. Please see the example post on mobile below and you’ll see how the non-featured image just misses the left-hand side. Thanks

[Leo]

Hi Mark,

That’s strange. I’m seeing a weird margin-right but not sure where it’s coming from.

Are you able to disable all plugins except GP Premium and GB and let me have a closer look?

Thank you!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

They’re still disabled. The photos are right-justified when on desktop.

[Elvin]

Hi Mark,

You can try bypassing the default styling WordPress adds on its alignright by adding !important.

Example:

@media (max-width:768px){
.wp-block-image img {
    width: 100%;
		height: auto;
}
}

@media (max-width: 768px){
.wp-block-image > .alignleft, .alignright {
    float: none !important;
    margin: 0em !important;
}
}

This code removes the default float: right; and margin: .5em 0 .5em 1em; by WordPress’ .alignleft, .alignright classes.

A wise man once said:
"Have you cleared your cache?"

[Mark]

Worked perfectly.

[Mark]

Is there a way for this only to happen on a phone and not on a tablet?

[David]

Hi there,

in the CSS provided you can 2 x instances of 768px reduce this value to 600px

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mark]

Awesome. Thanks!

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts