- This topic is empty.
October 1, 2013 at 4:21 am #151785
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 KOctober 1, 2013 at 5:24 am #151789
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.October 1, 2013 at 5:46 am #151791
If you change the order in which the stylesheets are loaded
the header works correctly. Of course, a lot of other things break too! :)October 1, 2013 at 5:49 am #151792
Hi everyone, I’m here. I’m working on Paulie’s suggestions at this moment.
Plz gimme a few minsOctober 1, 2013 at 5:54 am #151794
@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!!October 1, 2013 at 5:57 am #151795
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.October 1, 2013 at 6:00 am #151796
@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.October 1, 2013 at 6:09 am #151797
@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
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 sheetsOctober 1, 2013 at 6:30 am #151798
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.October 1, 2013 at 7:04 am #151800
Ugh.. ANYTHING But JS. There’s got to be a better way than JSOctober 1, 2013 at 7:07 am #151801
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.October 1, 2013 at 9:09 am #151810
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.October 1, 2013 at 10:31 am #151816
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.October 2, 2013 at 5:21 am #151892
@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.October 2, 2013 at 6:45 am #151898
Do you have an updated link?
- The forum ‘CSS’ is closed to new topics and replies.