- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I am new to responsive websites. I am unable to fix this problem. I have used a sticky header which reduces in height on scroll but because it has a fixed position, the slider below it is hiding behind the header due to which the slider is not at all visible on page load in mobile or small screen devices.
I tried giving margin top to slider but it shows a lot of gap once u scroll till the end of page and up again. Also it is showing white space at the end of the page which disappears when you open Inspect element. Please help.
Website link : http://fiveonlineclient.in/project/vizcom/
The slider section should have a top margin equal to the height of your header bar etc….it’s about 120px I think.
You would need change this margin-top value in your respective media queries as the header changes in height.
Hey Thanks for the quick reply. I have already tried what you suggested. Once I give margin top of 120px , (in desktop view itself without media queries) it shows that much gap between slider and header once you scroll down and back up.
Its somehow just not working.
You would need to adjust the margin every time the header changes height whether this due to a media query OR a JS event.
As this happens on the scroll due to a JS event you would need to add another change into the JS function to adjust it accordingly.
Hey Thanks. My problem got solved finally.