I’m using bootstrap code (shown below) to put it together but I’m still having problems with the image in the third column. The png image is in a div and because I need to have it positioned so that it overlaps the green section that contains the layout, I’ve used relative positioning as you can see in the inline style below.
The problem is that I need the bottom of the div (containing the image) to be positioned at the bottom of the section while still have the top of the div positioned outside the section so that the image looks like it’s overlapping. As you can see from the screenshot, the bottom of the image looks cut off.
I need the first 2 columns to remain vertically centred within the green section (no matter how much text is added but the image in the third column needs to remain where it is and scale (within the div) if the height of the overall section becomes taller.
Sorry not sure if that makes sense but if anyone has any advice on how to get this working, I’d be grateful. Have been trying to figure it out for ages!
Thanks in advance.
<section class="content content-09" style="background-color: #D3DBD4;">
<div class="container">
<!-- ROW 1 -->
<div class="row align-items-center">
<!-- COL 1 -->
<div class="col-12 col-md-8">
<!-- NESTED ROW AND 2 COLS -->
<div class="row">
<div class="col-12 col-md-6">
<h3>How I can help</h3>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit...</p>
<a class="btn btn-primary" href="#" rel="noopener" title="">Read More</a>
</div>
<div class="col-12 col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit...</p>
</div>
</div>
</div>
<!-- COL 2 -->
<div class="col-12 col-md-4" style="position: relative; top: -3rem; bottom: 0;">
<img src="{{ 'images/content/homepage-portrait-placeholder.png' | asset_url }}">
</div>
</div><!-- row -->
</div>
</section>
There are are number of logic questions that remain unanswered in your question that need to be clarified before we can proceed.
What controls the height of the green block?
You say that you want the text vertically centred inside the green section which implies that something else is controlling the height of the green section? What actually controls the height of the green section?
If the text controls the height of the green section then the text is already centred vertically unless you meant that you wanted the text in the columns to be centred vertically in respect of each other? If so this has nothing to do with the green background as that is automatically controlled by the largest chunk of text.
How should the image in the right column scale?
You say you want the image at the bottom of the green block but to overlap the top of the green by xxpx amount. At the same time you say you want the image to scale up and down with the size of the green block. What happens when there is a lot of text? In order for the image to maintain aspect ratio at larger heights it would need to be much wider also which may mean that the image would either break out of its column width or indeed overlap the text.
You can’t just stretch the image vertically but not horizontally if this is supposed to be a real world image object. If you don’t mind the image being squished then of course you can just stretch it vertically but if this is an image of a person then it will look very odd.
Your choices would be to create the image as a background image instead and then it be underneath the text in the case that there happens to be a lot of text (or absolutely place the image so that it can be layered under the text).
In any case you will never use position:relative for moving things around like this as it is not meant for that type of behaviour. Position:relative only moves things visually but their physical space is always reserved at their original position (hence the gap at the bottom in your demo).
can you attache the actual image you are using so that we can use it any demos we provide so that its behaviour can be tested.
If you can answer those points above then we will be closer to providing a solution
Yes the text controls the height of the green block. I think “align-items-center” is the bootstrap code that centres the text within the section.
I understand that if there is a lot of text then the height of the green box will grow and that this will affect the sizing of the image so I agree that the image should be a background image. I was kind of hoping that it would grow and shrink proportionally within the div but not sure how to do this with css.
I know I used relative positioning but I just didn’t know how else to get started with it which is why I’m asking for help.
I’ve attached the image in case this helps.
I hope I answered all the questions - if not, please let me know.
I created my own image from your first post so you will need to adjust and substitute with the real image.
I put the image as an absolutely placed background because it is easier to place. At smaller screens it just sits under the text hence the need for controlled layering of the elements in question.
I don’t know why you had nested rows as they aren’t needed. Indeed without the nested rows the vertical alignment is automatic as can be seen by the shorter text in the second column. I’m not sure if this is what you meant but seemed logical to me.
The overlap at the rip is preserved by the margin-top on the element but you may need to monitor this depending on what is above this section on your real page.
Let me know if this was the effect you wanted and be sure to resize page and add more or less text as required to check the effect.
Thanks very much for this Paul. With regard to the nested rows, I did this because I wanted the two columns of text underneath the heading to always start at the same y-coordinate - is it possible to keep the nested rows?
Also instead of the image falling behind the text at smaller sizes, is it possible for it to fall beneath the text? I assume that because you used absolutely positioning that this is not possible - is that right?
lol that’s not what you said and I asked this question already You said you wanted the text centred in the green block which is why you put align-items-center on it (which aligns them vertically). You would need to remove the align class and simply put your heading above the row.
You could move the image to the bottom on smaller screen but you would have to fix the height to make it show.
Here is a new codepen with the above changes in place.
Sorry about the misunderstanding with the text centering - I’m just getting a bit confused with all these new bootstrap classes. It’s great how it’s looking now but I’ll just test it again in the morning with the proper image and get back to you if that’s ok as it’s quite late here.
Hi Paul, thanks - I’ve tested this now and it’s working really well. I just wondered though, if I wanted the image in mobile view to appear before the columns (ie. first), could you let me know how I would do that?
Also, why did you use a nested media query - I’ve never understood these so it would be good to find out.
