There's a challenging issue I've been facing and I can't find a way around it.
What I'm trying to achieve is a responsive design where both the menu and text resize seamlessly when the resolution changes or when there's a zoom in/out. Although the images and content divs adjust properly, the menu seems to be the stubborn one that won't adapt.
If anyone could offer some assistance with this, it would be greatly appreciated.
Here is how it looks in the normal view:
And here is how it appears in the zoomed view:
The structure of the menu is as follows:
<a href="nissan-s13-project.html" title="The Project">The Project<span class="desc">Full description</span></a>Along with the corresponding CSS:
a .desc {
display: none;
text-transform: lowercase;
font-size: 1em%;
color: #FC0;
max-width: 100%;
z-index: 1;
}
a:hover .desc, .active .desc {
display: block;
font-size: 1em;
max-width: 100%;
z-index: 1;
}
At this point, I'm at a loss for what else to try.
Also, the text is styled as:
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
max-width: 100%;
}