Image back in the normal flow

[smedz28]

I seem to have developed a problem, I am using responsive grid and have 3 columns with images pinned to the bottom using relative and absolute positioning

<div class="col-3">
    <div class="sub-content">
    <h1>No Matter What</h1>
    <p>If you're feeling down, need a shoulder to cry on and haven't had the best of days then Mandy is always there to comfort you, offer words of reassurance and console you in your time of need. Mandy has been a pillar of strength over the last 12 months, picking me up and supporting me through some challenging and emotional moments.<br><br> Everyone has their own problems to deal with and the pressures of life that's thrown at them 
    everyday but Mandy is always there to support here close friends and family at the drop of a hat, always putting others before herself.<br><br>
    When you have someone that supports and cares for you so selflessly don't take it for granted. Sometimes bearing the burden of other peoples troubles can give people the impression that they are strong enough to deal with their own as well, take more notice of your lover and be there when they need you to return the favour. Stop an appreciate each other.....remember, you can never say 'I love you' too much.</p>
    <img src="images/beach-love.jpg" alt="Marc loves Mandy">
    </div>
    </div>

.sub-content { 
    padding:1% 1% 50% 2%;
    background:#F69BA4;
    position:relative;
    
}
.col-3 .sub-content {
    min-height:750px;
}

.sub-content img {
    margin:0 auto;
    position:absolute;
    bottom:10px;    
    border:2px white solid;
    max-width:96%;
    height:auto;
    
}

when I resize the window the responsive grid works but the layout breaks as the text starts to flow behind the images pinned to the bottom. I am trying to write a media query to put the images back in the natural flow so that the text pushes the image down at small screen widths. I cannot seem to figure out how to do this, everything still seems to be positioned relative and absolute

[shaneisme]

Think you could set it up on Codepen for us?

Just take the specific part you’re having problems with.

[smedz28]

I’m trying but haven’t used it in a while and the password reset email doesn’t seem to be coming through

[smedz28]

test

[shaneisme]

It looks like that’s working out well for you, you just need to put in the full path to the images so they’re not broken.

That said, I don’t see any break points in your code.

[smedz28]

I have uploaded the files to the actual website so hopefully you can see what my issue is. I’m trying to add the first breakpoint as when you reduce the viewport size to around 1004px this is when the text starts to flow behind the images, i’m trying to add the images back into the normal flow by writing a media query to remove the positioning but it still seems to adapt the absolute positioning. Hope that makes sense?

Live site

[shaneisme]

Right I see what you’re trying to do, however your site has no media queries built into it.

Essentially from your original posting, you are not using a responsive grid.

Check out this video Chris put together so you can wrap your head around it.

https://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

Once you have figured out your first media queries, we can help fine-tune things.

[smedz28]

Right I see what you’re trying to do, however your site has no media queries built into it. Essentially from your original posting, you are not using a responsive grid.

Sorry shaneisme but I think you are missing my point here, my problem is that I am trying to add the first break point and write a media query for this due to the previously described problem. The break point will be @media screen and (max-width: 1004px)

I’m not sure if this looks like a weird break point but from a few tutorials that I have read I have been encouraged to add break points where the layout starts to break and not tailor my breakpoints to specific device resolutions such as ipad or small android phones.

As for not using a responsive grid, I disagree with that. The grid that I am using I wrote myself but was heavily influenced by another tutorial and grid system that I seen @ http://www.lemonade.im

Here is my codepen to show the grid I am using Grid codepen

[shaneisme]

Yes, please add the break point! Then we can get responsive.

[smedz28]

Sorry for the delay in responding, i’ve been working on this problem for the last couple of days and think I have it sorted now, however I now have a new issue with positioning my footer at the bottom of each page, not all the web pages for this site have enough content to push it down to the bottom of the screen, for example the footer shows half way up the screen when viewed on an ipad in portrait…..I will create a new post for this if necessary

Thanks

[shaneisme]

You don’t need to create a new post, but a live example would be helpful!

[Author]

Posts