Column Background Image 100% height

Hey,
I am having a major mind gap right now. I have a 2 column section, one side with an image the other with text. I want the left column’s background image to cover 100% of the vertical height and respond to the height according to the right columns text.

When the screen size width is between 775px - 1000px it shows an example of how it is not responding correctly and not 100% height. Also, my header tag gets cut off as well which I have noticed with some of my other Webflow sites.

I know there got to be a better way to create this, I am just gapping out.

Site Link:
https://preview.webflow.com/preview/klutter?preview=d635ea0150768627a044ec1a3367bb33

Much appreciated,
Luke

1 Like

Hey Luke,

What I would do is use an image element in the left column instead of a background. I would set the overflow on the column class to hidden.

I would then remove the max 100% width setting you have on all images.
Give your image element a class name, and give that class a min width of at least 130% maybe more.That should give the image enough room to shrink before the next break point.

Let me know if that helps.

Hey @AlexN
Thank you for the comment. I implemented what you suggested but it still didn’t do the trick.

Hey Luke,

You’re close! :smile:

You need to change the settings you have now.

From this

To this

To remove the 100% max width you have to select the “all images” selector. We know this because it is orange.

To select the “all images” selector press the selector panel button.

once it is open it will look like this. Select “all images” and you will see the max width setting turn to blue. Remove this setting.

3 Likes

Thank you for the clarification. I added the 130% min width and removed the % max width on all images but I am still seeing this.


What I would do Is change the column structure.

I would change it from the 8 and 4 structure to a 7 and 5 structure

Then on the tablet view port I would increase the min width to 165%.

Ya that seems to be working better now. Thanks for the pointers, this is an issue I run into a lot and these techniques will help me deal with these style sections responsively.

Now that I have had the chance to look at it a bit more, although far better to what I was doing before, I do find a few issues with doing it that way. Because of the image width, the crop of the image will always look off. Then also, I would prefer not to have that restriction of column layout.

If you look at the section now and my adjustments the background image seems to respond perfectly in any layout. I set the body and section / row / col to 100% height. The issue I see is that the text content overflows at a certain size. Here is a couple screenshots (second one is from another Webflow site I tested it on).

So I guess the solve I need help with:
(1) Figuring out why the text is overlapping like that.
(2) How to apply that responsiveness to a section less than 100% height as not all of them will be full screen (height) sections.

Maybe a better way to get the desired functionality is with equalized columns?

Hi Luke,

I took a look at your site a couple of times over the past couple of days. I also can not figure out why your sections are “overlapping” when you switch to tablet view. I’d like it if someone could chime in as to why the header/paragraph/link content is spilling out just to understand why myself.

And yes, you are correct. If you want your “bin section” to have a structure of 8/4 or 7/5 on the desktop media query then it works - but when you switch to the tablet view and things get super cramped on the content side… you really should alter the “column” setup to break - making the image 100% and the content 100%. It looks much nicer this way. You would then also change the height of the “image” column to be something much smaller once it breaks so that way you don’t have a 700 - 800 pixel tall image of a dude holding a bin…

But again, I’d still like to understand why you get the “overlapping” sections considering they both have an auto/block display property by default. I assume it has something to do with the smattering of 100% heights involved, maybe it’s required to have an actual pixel based height assigned? I did get it looking nice (using a mix of % & px based heights) but had to make too many changes to list in succession here.

Any of the more advanced html/css folks want to take a look & chime in as to why those sections are overlapping & the content is spilling out?

Hey @Mogeek,
Thank you for the suggestions & yah I will clean up that column set up in those views. But like yourself, I just wanted to first figure out this responsive functionality as it is something I use a lot and will help me with other projects.

Sorry for leaving you stranded I just saw your posts.

The reason your content is overflowing into the sections below is because at the smaller screen sizes the wrapping container is set to be 100% of the screen height but the text content, because it is so skinny and tall, is greater then available space given to it by the wrapping container.

If you set overflow to hidden the overflowing text will disappear. If you set the overflow to auto then the container will give you scroll bars when the content becomes to large for its container.

If you leave it to visible then it will appear to spill into the other sections. This is the same behavior any other element would have.

If the overflow is happening within a lower break point having the columns stack can be a good option.

1 Like

Ya I mean having the columns stack is fine. I just want those full col/block images to automatically respond better until that point. Like equalizes columns / blocks. It just seems a bit of a pain to do in Webflow.

I don’t know if you have any tips for equalized cols. If not I guess I will just stick with setting in the height for desktop and making those adjustments at each breaking point.

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