I have a list of menu items within a div of a background img. When the browser is resized the the background image and the list items' fonts resize nicely.
However the list jumps up the page the smaller the browser becomes. I've tried positioning it in place using percentages and ems to no avail. Incidently, there are to slideshows on the page that do this perfectly, however when I apply the same CSS to this list it fails to stay in position.
the CSS on the background is:
.homepage-banner {
position: relative;
max-width: 95.949em;
margin-left: auto;
margin-right: auto;
margin-bottom: 3.631em;
display: block;
}
the CSS on the list is:
.Categories {
width: 33.333%;
position: relative;
z-index: 1000;
float: left;
top: -10em;
}
.Categories:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.Cat_header {
color: #44E86A;
text-shadow: 1px 1px 1px #000;
font: inherit;
font-weight: bolder;
font-size: 2.6vmax;
line-height: 3vmax;
}
.Cat_menu {
position: absolute;
text-align: center;
right: -20%;
left: 20%;
bottom: 0%;
top:0%;
color: #44E86A;
text-shadow: 1px 1px 1px rgba(42, 151, 210, 0.65);
}
You can view the page on http://ragdivers.com/Ragdivers/. The list is in the bottom center of the background image called 'Product Categories'.
Any help would be greatly appreciated as I have been struggling on this for weeks.
It looks like it is because you do not continue the top positioning adjustments in your media queries section like you do for the left and right in your custom.css. So your left and right adjust to 5.5em for example but your categories div still stays at -10em. You will need to adjust the top positiong for that as well to make it stay vertically aligned with your left and right divs. Although I would advise this should all be coded in a differnet way other than all the positioning etc.