Docs

[gabriellavanrij]

Hi, there!

I’m using a child version of the latest X theme, also Cornerstone, and the latest WP.

I’m wondering if there’s a way to force widget images to fill the width of a web browser?

http://gabriella.global/quote/

Right now, the image is displaying at its uploaded size, but I would like to force it to be as wide as a person’s viewing screen.

Thanks for any help you can give me with this.

[Friech]

Hi There,

Thanks for writing in! First your Section, set the padding and margins of the section to 0.

Then the ROW, disable your ROW’s column container option.

And then the Image, and a width: 100%; on the image element STYLE field.

Take note, because your image is small it will be stretch so it will cover the width of the container.

Hope it helps, Cheers!

[gabriellavanrij]

I did the first two steps, but there is no “image” that I can select as it’s an image inside of a widget. Any other help you can give me? Thanks!

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.wppa_widget img {
  width: 100%;
  }

Hope this helps.

[gabriellavanrij]

Yes, that worked! But I just realized that maybe what I need is to have the image always fill the screen. So how do you make the height 100 %?

[Rad]

Hi there,

That’s not possible, imagine a vertical image (portrait) is stretched to a square or landscape device. It will be too wide and too short. How about adding your image as a background, then just center your image regardless of the size (crop effect).

But if you insist, you can change it into this

.wppa_widget img {
  width: 100%;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}

Thanks!

[Author]

Posts