Stumped on something simple

I am converting a site to BB. Some of the inside pages have a header image. Originally I created a widget area and hooked it after the header. I simply dragged an Image Widget into the widget area, added the image (1600 x 400) and the I used widget logic to specify the page for that widget.
I would like to do this on page instead of the old way. I can’t for the life of me get the 1600 x 400 image to be full width. Once it reaches 1600 px it stops The max-width is set to 100% but does’t work. I can use larger images but that still doesn’t solve the full width issue. I’d use Image Widget (by Modern Tribe) instead of the photo module but it doesn’t work in BB.

What am I missing?

Page with BB header : http://warrenbaptist.org/articles-answers-to-faqs/
Page with Image Widget in Widget area: http://warrenbaptist.org/easter-sunday/

Melanie

Hi Melanie,

You could try adding a background image to the actual row instead of using a Photo Module. Then use padding top and bottom to increase the area to show all your image.

Thanks,
Danny

Yes, but I really didn’t want to do it that way. I’ll keep the widget area for now.

Hi Melanie,

The Photo module will display the max size of your image which is 1600px wide. It will not cover the entire container it is placed in.

Therefore, to resolve your issue and allow you to continue using the Photo module. You will need to use some custom CSS.

To do this, first you will want to add a custom class to the Photo module, this way you will not affect all Photo modules.

Open the Photo module settings and navigate to the Advanced tab. Once there scroll down to the Class option and add a custom class.

Then replace the class name “my-custom-class” in the CSS below with the class you added and this should resolve your issue.

.my-custom-class .fl-photo-content,
.my-custom-class .fl-photo-img {
  width: 100% !important;
}

Thanks,
Danny

Funny that is the first code I tried. Now I realize I had been looking at a preview window and refreshing it. I couldn’t figure out why that didn’t work.
Sometimes you just need to step away. thanks.

Melanie

Hi Melanie,

No problem and happy to hear issue has been resolved.

Thanks,
Danny