[Resolved] I want image to expand to full width of row it is contained in
This thread is resolved. Here is a description of the problem and solution.
Problem:
Images are not expanding to the full-width of container on very large screens.
Solution:
The images are too small and need an explicit style rule to set width:100% to make them expand beyond their natural size to fill a larger container.
This support ticket is created 6 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
I have an layout setup with 2 columns and some rows. I have an image in a row on the left side of page, columns split down the middle. The image looks good and stays in the row until you expand the page out and full screen on retina monitor the image does not stay the full width of the row. I would like the image to be responsive when the window is extended and continue to fill full width of row. Please see here:
The image on that page is 1200px wide, and if you expand the browser window wide enough so that its container is more than 1200px, it doesn't expand to fill the extra space.
The images have a max-width: 100% style rule to make them resize nicely on small viewports, but you would need to explicitly set a width of 100% to make it expand to the full width of the containing element.
Looking at the source code I see that this image has an inline style setting for the width of 1200px, its natural width.
I'm not sure how you are inserting the image.
If I add a Visual Editor cell and use the Fields and Views button to insert the image field and accept the default settings for the full-sized image, the shortcode generated looks like this:
You need something similar, that doesn't have an inline style setting the width.
You can then add a wrapper div around the shortcode that generates the image tag and add a CSS style rule targeting the img inside that wrapper div to set the width to 100%.
Do you want to try that and let me know if you have problems.
New issue in this layout. I want the column on the left to have the grey background no matter where the text ends. I want it to always extend to the footer no matter what happens on the right column. I did increase padding in a css style that worked but is not ideal as all copy will not be the same and I would also need to make media queries. How can I get that left side to be grey at all times?
hidden link
Thanks
New threads created by Nigel and linked to this one are listed below:
I split that question off into its own thread: we have a one issue per thread policy to make it easier for others to research problems, and it is an interesting-enough question in its own right.
