Grow your CSS skills. Land your dream job.

Need help with layout

  • # May 17, 2013 at 2:25 pm

    Hello all,

    I am working on this layout and am having issue with the main section for the content. Overall the layout works fine on computers that have bit bigger screen but on 15 inch laptops or when window is smaller, i noticed that my main div (the one that contains the wooden board) gets pushed up under the browser menu bar. i would like to keep the design if possible and implement some sort of workaround where the wooden board stays appearing to be held by the cows that stand on the beach but when the window is smaller not to go into negative. Hope i make sense.

    here is the link:
    [Your text to link here…](http://colignyicecreamcone.com/template.php “working template”)

    # May 17, 2013 at 3:02 pm

    u hav used all images in ur page which hav dimensions in pixels. and scrolling is off so the images wud go beyond borders

    if u hav to do wat u r saying then u will hav remove attributes like fixed / absolute positions use % if possible for image size and create a grid network of divs

    # May 17, 2013 at 3:26 pm

    > u hav used all images in ur page which hav dimensions in pixels. and scrolling is off so the images wud go beyond borders
    if u hav to do wat u r saying then u will hav remove attributes like fixed / absolute positions use % if possible for image size and create a grid network of divs

    Seriously, really?

    It’s not about pixels. It’s the fact that you use the bottom of the screen as a baseline for the beach and the main (by giving it a BOTTOM position, and because of that you make sure that those elements are always positioned based on the bottom border). So yes, on smaller screens the top might be cut off.

    You might want to look into restructuring things a little bit and position everything based on the TOP of the screen. Of course, then you’ll run the risk that things will get cut off at the bottom.

    # May 17, 2013 at 3:37 pm

    > Seriously, really?

    word

    thanks guess i was wrong here will try to be better next time!

    # May 17, 2013 at 4:09 pm

    I bet some one else could make this better but here’s my hack of a fix using media queries

    http://codepen.io/wmwood/pen/rdnky

    http://codepen.io/wmwood/full/rdnky

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".