Full Width Image - Element CSS

Support
#1

I checked the various resources for making / stretching an image element to always be full width (even if the image quality degrades) but I’ve not been successful in my outcomes.

On the image element, using element level css. I’ve added:

$el img {
width: 100%;
height: auto;
}

I see it in the inspector on the rendered page, but the image isn’t full width.

I’m using the no container layout. The row is set to be containerless/marginless.

Retina is off.

Are there any other suggestions to getting my image to be full width?

thanks

#2

Hello @wbgTHEMECO,

Thanks for writing in!

You don’t need to use custom CSS code for full width image layout. However, as you have tried the steps to have full width image and image is still not going full width, can you please share exact page URL so I can take a closer look at the setup? May be some custom CSS code interfering and causing issues. Please do following:

  1. Remove custom CSS and Javascript from the options or Child Theme and test the case.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

#3

Thanks for the tips Prasant. It turns out that the one thing I didn’t do was set the width to 100% in the setup section of the Image element. I completely overlooked it.

However, I did notice that when the width is set to 100%, when the image elements in the 3 column row go to a single column, the images are flush left. I did try setting text-align to the section, row, column as well as setting the left and right margin to auto, but nothing I’ve tried thus far will center those images on a single column.

Is there a way to do that? Or would I need to create a duplicate with images set to auto (which I can then center just fine).

Thanks

#4

Hi @wbgTHEMECO,

Is there a chance that you can provide us the link to the page in question so that we will have a better idea of the current setup and provide you with some suggestions?

Thank you.

#6

I added the URL to the page with the images.

Additionally, I did set the width to 100% in the setup panel, but the images are not going full width. I thought it had fixed it but I think there was some caching going on that confounded the issue.

Perhaps you can take a look at why the images don’t stretch to full width within their columns.

Thanks for helping.

#7

Hello @wbgTHEMECO,

Your code when added in all 6 images should resolved your issue.

$el img {
  width: 100%;
  height: auto;
}

Or you can simply add this general custom css:

.x-image img {
    width: 100%;
    height: auto;
}

Please let us know if this works out for you.

#8

I’m having the same issue and the solutions above are not working. Here are the links to the pages that I cannot get the image to go full width 1. https://www.eacreative.ca/social-media-management/ 2. https://www.eacreative.ca/services-social-media-coaching-training/

#9

issue solved, disregard my previous post.

#10

Glad you’ve sorted it out.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.