Grow your CSS skills. Land your dream job.

Responsive CSS help

  • # April 17, 2013 at 7:04 am

    Hey guys,

    I popped a question earlier without a proper example. I use the following script to get an offset from the fixed header and the website body:

    http://codepen.io/Archie22is/pen/vBqin

    It works fine on larger displays. My problem starts from the moment you move to smaller screens.

    The site if not done as yet – here is the link: bit.ly/17G5m7m

    How will one go about fixing the offset margin to vary according to the different media queries?

    # April 17, 2013 at 7:43 am

    This is the scroll to top item, yes?

    In that case, I’d lose it completely for scrolling devices. People will just swipe/scroll/slide anyway.

    # April 17, 2013 at 7:48 am

    Hi Paulie_D,

    Thank you for the reply. No, not the scroll to up – that I will sort out on mobile devices later.

    What I meant is when clicking on the menu item, it takes you (scrolls) to the menu item on the page. It correctly takes you to the correct page on a big screen but on smaller screens (tablets, mobile devices, etc) it misses the page section because of the offset set in the jQuery.

    I want to find out if there is a way to adjust the offset for each of the different layouts?

    # April 17, 2013 at 8:03 am

    I’m no expert in JS but can’t you set/get the height of the header as a variable (plus or minus whatever) and use that instead?

    # April 17, 2013 at 8:10 am

    Paulie_D… I don’t see the reason why that shouldn’t work. I will be back to compliment you and crown you a genius – lemme get back to work :-)

    # April 17, 2013 at 9:20 am

    Paulie_D… you are a GENIUS!!!

    [RESOLVED]

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

You must be logged in to reply to this topic.

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