[Solved] Trouble With Content Being Pushed Down on RWD

[youradrenalinefix]

Hi everyone,

This is my 1st post here but after seeing nearly 13k topics and 67k posts… where’ve I been??

I’m working on converting an existing site to a RWD (Not Rear wheel drive) with media queries and specific css files which can be viewed at.

/support-files/style.css /support-files/landscapemobile.css /support-files/mobile.css

And the domain is: http://classifieds.your-adrenaline-fix.com/

My problem is upon resizing of the browser (squeeze the browser down to around 480px wide or narrower) you’ll notice the header image resizes but leaves a big transparent space below the header as if preserving the space previously occupied by the full height of the header image.

I’ve tried everything I can think of but can’t seem to crack it so I went looking for a css forum and very gratefully found this.

I thank you all for your assistance and look forward to how simple this is gonna be to fix.

Stuart K

[Paulie_D]

It’s not using your mobile stylesheets….do you have them in the right order?

You can’t put max-width 800 before max-width 400.

[Paulie_D]

If you change the order in which the stylesheets are loaded

max-400
max-800
styles

the header works correctly. Of course, a lot of other things break too! :)

[youradrenalinefix]

Hi everyone, I’m here. I’m working on Paulie’s suggestions at this moment.

Plz gimme a few mins

[youradrenalinefix]

@Paulie_D, I tried your 400 > 800 > styles recommendation and although it appears to fix it because the black no longer shows through but it’s actually not fixed. The background image is still showing and with this configuration the content (search box) is still pushing down. It’s just not black under the header image.

And Thanks A Bunch for Your Assistance!!

[Paulie_D]

As I said, it would break a lot of things….the original site was obviously not designed to be responsive.

Rather than retrofit responsiveness, it would have been better to re-build it from the ground up and start mobile first.

[youradrenalinefix]

@jurotek, If i don’t set this min height the image won’t display (or possibly gets real small. I dont rmbr). Plus, since it’s in relative terms of 7em that means that it’s always just 7em of it’s parent just as the header image does. I just don’t know why everything is pushing down like it is. I’ve even tried margin-bottom:0; on the header and / or margin-top:0; at the beginning of the content below the header but on resize (simulating a mobile device) the content pushes down as we’ve all seen.

[youradrenalinefix]

@Paulie_D As I said, I appreciate your help and welcome additional input but I gotta set the record straight.

Actually, the style sheets are 90% responsive. (I’m cleaning up the remaining px measurements today) but all of that is irrelevant.

I just don’t understand why we can’t go from

div id Header … /div

to

div id ContentWrapper … /div

without a huge block of empty space upon resizing (or accessing on a small device) all the while using mediaqueries and specific mobile style sheets

[Paulie_D]

I’m guessing that its the background:contain scaling the image.

It will maintain the proportions of the image correctly but what it won’t (and can’t) do is change the height of the header which is set, in this case, by a min-height.

For instance at, 400px wide the image height will only be c50px tall…which is less than 7.375em I’m guessing and lets the bg color of the body show through.

At this point, I think the only option using the current methodology is JS.

[youradrenalinefix]

Ugh.. ANYTHING But JS. There’s got to be a better way than JS

[Paulie_D]

Not as far as I can see….you’re trying to affect the size of an element with a bg image…and that just doesn’t work.

To make the the image truly responsive it needs to BE an element.

http://codepen.io/Paulie-D/pen/JFBxa

[Paulie_D]

@Jurotek.

Not sure why you quoted me there. Perhaps you misunderstood what I was saying.

What I meant was you CANNOT (AFAIK) affect the size of an element by changing the CSS properties of a background image using straight CSS.

[Paulie_D]

Changing background properties (whether in media queries or not) will NOT affect the height of the element and that’s the problem.

In this case, it makes more sense to just put the image in the HTML and not in the CSS at all. In that way it will scale exactly how he wants it to without any need for media queries at all.

[youradrenalinefix]

@Paulie_D, You Rock!! I did put the image inline and that fixed it about 95% but there’s still a black spot appearing below the header image on resize and I’ve tried negative margins and the works to get rid of it but nothing seems to do the trick.

If you could so kindly share with me how I might get rid of the last bit of black I’d be most appreciative and I thank you once more in advance.

[Paulie_D]

Do you have an updated link?

[Author]

Posts