How to Command a Theme to Always Display Images at a Certain Width?

[Regev]

I dislike it when images are constrained to the width of the content column, how do I enable them to display at a certain width (for example, 1280px) even if my content column is 717 (no sidebar theme)?

Thanks!

[Victor Font]

See if this helps: http://www.modusagency.com/css-trick-expanding-a-div-beyond-a-parent-container/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Regev]

Hmmm isn't that a bit too complex? Somebody asked the same question on a non-Genesis theme's forum, somebody replied to him:

The image isn’t wide enough to naturally fill the area you have positioned it within, but you can force the image to fill the space by making it 100% wide, like so:

.post_content img { width: 100%; }

Isn't there a similarly simple solution to simply force all content images in Genesis (specifically No Sidebar) to show at certain width?

[Victor Font]

Here's another method that may be easier for you: https://wp-agency.co.uk/expanding-a-div-beyond-its-container-to-be-full-width-of-page/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Regev]

Thanks Victor! I tried the code but it doesn't work - the image is enlarged, yes, but it isn't centered at all and messes some other elements.

I did find a simpler solution, which is just changing the max-width value here to a higher number:

embed,
iframe,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

To allow it to spread nicely and evenly, I then removed the 15% paddings from:

.entry-content {	
	padding-left: 15%;
	padding-right: 15%;
	clear: both;
}

But the problem is that the text now also extends to 1024 pixels (the 15% from each side brought it down to 717px). Any chance to apply the 15% paddings to the text only so that it gets narrower back to 717px? Even better, to simply remove the 15% paddings to everything media related (images, videos, etc)

Any idea much appreciated.
Thanks

[Victor Font]

Try using negative margins for the image and leave the padding alone.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Regev]

Ok, but what negative margins exactly would you use to keep the images (can be anything from 600px to 1024px wide, which is also the containing div's width) centered nicely?

Thanks again, Victor.

[Regev]

Still can't align them properly. The problem is that I reached a number that works very beautifully for *most images*, but anything smaller (images that can't scale up to 1024) get pulled to the left too much. Isn't there some CSS trickery to solve this?

[Author]

Posts