Hello I need a little help on some of my images on the
bottom of this PAGE titled “preferred products” so it could wrap
better
it starts to get a little messy when you start to change the window size
Why is your footer position:absolute? It will cover up the content so I would remove the absolute positioning and let it be static. (If you were trying to do a sticky footer then there are other techniques which I believe we have talked about previously).
Removing the absolute positioning will stop the captions being obscured. You also need width:100% on your #products-pd element otherwise it is shrink to fit.
Your images go from 4 across to one across at your breakpoint and if you spent a little more time on then you could make them go to 2 across first and then finally one across.
You could do this by setting then to display:inline-block on the figure instead of table-row and then manipulating the width on the featured-wrap (in the appropriate media query) to allow 2 images side by side. If you apply text-align:center on the products-pd the inline-blocks will center. Change the padding-left:90px to padding right and left (25px approx) to keep them central.
Then add another media query for smaller widths and revert to the original single column using the rules that were originally in place.
Its all about tweaking the code and looking at the result and acting accordingly. 
2 Likes
That is actually Bootstrap’s Stick Footer is that wrong?
When I remove position:absolute the footer lifts up.
ok
I call it ‘Bootstrap’s Sick Footer’
I would never use it because its too fragile as you see. My sticker footer is the best but not easy to implement in a bootstrap mess.
ah I see…
What can I do to fix the one already have?
Yeah I should keep in mind when to wrap things and not wrap things 
Website is on its own Host now: SITE
The problem is that the bootstrap sticky footer is a fixed height element (because it can’t work any other way with the structure it uses) and therefore when the footer text wraps the footer height increases and the pusher effect you have on the body is no longer enough to keep content clear of the absolute footer. This doesn’t happen in my version as it is a responsive auto height footer and needs no pushers, clearers or hacks.
What you could do is increase the height of the ‘pusher’ effect buyincreasing the bottom margin on the body so that it allows the text to wrap in the footer and still not overlap content.
e.g.
body {margin-bottom:80px}
Or alternatively fiddle with the footer so that the text in the middle has more room and doesn’t wrap so early.
Because the bootstrap footer is so badly broken I would be inclined just to remove the absolute positioning from it and remove the bottom margin from the body and just let the footer sit at the bottom of the document like normal.
Alright.
You would think that the developers would notice these things huh hehe?
When I remove both absolute positioning and bottom margin
it does not sit to the bottom.
It think it is this that is affecting it
body {
margin:0;
}
Now yer being silly… 
How would a zero margin applied by bootstrap.css on the body cause space beneath the footer?
Really.
Maybe your custom stylesheet has a story to tell…
Try removing
style.css (line 34)
body {
margin-bottom: 60px;
}
and see what happens. 
Dev Tools such as FireBug can be a big help. 
Yes that’s because it is no longer a sticky footer and sits under the content. I thought I explained that in my previous post.
If you want to keep that bootstrap sticky footer then increase the bottom margin on the body as I mentioned above and leave it absolutely positioned.
Or redo the page using my sticky footer technique but that would mean changing the html.
1 Like
oh silly me.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.