Archived topic
Managing Photos on Mobile to Stretch the Container Width
8 replies · Started by Mark on October 1, 2020
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
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!
They're still disabled. The photos are right-justified when on desktop.
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.
Worked perfectly.
Is there a way for this only to happen on a phone and not on a tablet?
Hi there,
in the CSS provided you can 2 x instances of 768px reduce this value to 600px
Awesome. Thanks!
Glad we could be of help
