Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Trouble With Content Being Pushed Down on RWD

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #151785
    youradrenalinefix
    Participant

    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

    #151789
    Paulie_D
    Moderator

    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.

    #151791
    Paulie_D
    Moderator

    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! :)

    #151792
    youradrenalinefix
    Participant

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

    Plz gimme a few mins

    #151794
    youradrenalinefix
    Participant

    @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!!

    #151795
    Paulie_D
    Moderator

    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.

    #151796
    youradrenalinefix
    Participant

    @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.

    #151797
    youradrenalinefix
    Participant

    @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

    #151798
    Paulie_D
    Moderator

    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.

    #151800
    youradrenalinefix
    Participant

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

    #151801
    Paulie_D
    Moderator

    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

    #151810
    Paulie_D
    Moderator

    @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.

    #151816
    Paulie_D
    Moderator

    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.

    #151892
    youradrenalinefix
    Participant

    @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.

    #151898
    Paulie_D
    Moderator

    Do you have an updated link?

Viewing 15 posts - 1 through 15 (of 20 total)
  • The forum ‘CSS’ is closed to new topics and replies.