I have a side element I want visible throughout the page. I am trying to make it WCAG compliant, so it has to increase in size up to 200% zoom, and not overlap other elements (I made a previous post about it and was instructed media screen was better than JavaScript, which was true). The page its self still needs to increase to 400% zoom. But I want to keep the side element from changing after that, as it takes up too much of the screen.
I think part of the difficulty is that I am using writing-mode: vertical-rl;to keep it as a text element that is rotated. If there is a better way to do this (other than image) I would love to know!
I have tried implementing @media screen sizes, this does a good job and will work, but I would like to keep it from getting as big as it does because I think it's still too big. I have tired font-size: clamp(16px, .125vw, 18px); which did improved it. When I implemented max-width on the id element the box surrounding the text stopped increasing, but the text continued to grow in size.
I have also tried implementing the advice here, with putting it in a div with a max width %, but the text would not be visible at larger sizes.
Is there a way to max out the text size to keep it from taking up so much space on the screen when zoomed? Thank you!
Here is my code (background colors were to help with floating the body text):
<!doctype html>
<html lang="en">
<head>
<title>Coding example of desired outcome</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<style type="text/css">
#strap {
position: fixed;
top: 2%;
left: 0px;
padding-top: 2px;
font-size: clamp(16px, .125vw, 18px);
background-color: #E8E8FF;
color: black;
writing-mode: vertical-rl;
border: 1px solid black;
font-family: 'Red Hat Display', sans-serif;
}
body {
margin-left: 3%;
font-family: 'Red Hat Display', sans-serif;
}
main {
margin-left: 3%
}
@media screen {
body {
background-color: blue;
margin-left: 30%;
}
#logo {
max-width: 100px;
}
#strap {
left: -10px;
text-size-adjust: none;
bottom: 2%;
}
}
@media screen and ( min-width: 300px) {
body {
background-color: orange;
margin-left: 22%;
}
#logo {
max-width: 200px;
}
#strap {
left: -10px;
text-size-adjust: none;
bottom: 2%;
}
}
@media screen and ( min-width: 400px) {
body {
background-color: yellow;
margin-left: 18%;
}
#logo {
max-width: 300px;
}
#strap {
text-size-adjust: none;
bottom: 2%;
}
}
@media screen and ( min-width: 500px) {
body {
background-color: purple;
margin-left: 10%;
}
#logo {
max-width: 400px;
}
#strap {
bottom: 2%;
max-width: 44px;
text-size-adjust: none;
}
}
@media screen and ( min-width: 600px) {
body {
background-color: green;
margin-left: 10%;
}
#logo {
max-width: 500px;
}
#strap {
bottom: 2%;
max-width: 44px;
text-size-adjust: none;
}
}
@media screen and ( min-width: 700px) {
body {
background-color: orange;
margin-left: 6%;
}
#logo {
max-width: 600px;
}
#strap {
bottom: 2%;
max-width: 44px;
text-size-adjust: none;
}
}
@media screen and ( min-width: 800px) {
body {
background-color: blue;
margin-left: 5%;
}
#logo {
max-width: 700px;
}
}
@media screen and ( min-width: 900px) {
body {
background-color: black;
margin-left: 4%;
}
#logo {
max-width: 800px;
}
}
@media screen and ( min-width: 1000px) {
body {
background-color: white;
margin-left: 4%;
}
}
</style>
</head>
<p id="strap">KeepThisPart — Please123 by Keeping12 VisableAtAll TimesThnx</p>
<body>
<h1>Sample text and examples</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eros dolor, finibus eu dictum eget, facilisis ac magna. Nullam eget cursus metus. Nullam tellus diam, tincidunt ac nulla in, porttitor porttitor magna. Sed vel lacus massa. Nam suscipit
metus eu pharetra pulvinar. Nullam luctus sem ex, a pharetra justo luctus quis. Nunc gravida, risus eu elementum vestibulum, dui enim convallis ipsum, a congue felis elit ac quam. Praesent egestas nisl dui, ac imperdiet orci semper quis. Integer accumsan
lorem a aliquet scelerisque. Proin semper odio ornare pulvinar hendrerit. Fusce sit amet varius risus. Etiam blandit lacinia mi a consequat. Ut finibus malesuada dolor, sit amet interdum dui consequat ac. Nullam eget orci ante. Donec ullamcorper sapien
eget leo tincidunt, ac imperdiet quam faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin varius pretium. Nunc porttitor ipsum sit amet arcu auctor convallis. Vestibulum ac suscipit nibh, in bibendum nulla. Donec
ligula diam, luctus sed commodo ac, auctor vitae libero. Vivamus id justo leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere lobortis est, nec ultrices sem mollis ut. Donec rhoncus sit amet enim vitae commodo. Mauris porta
tortor eget cursus convallis. Duis vehicula, dui sed semper fermentum, nibh est gravida nisl, vel convallis dolor felis ac turpis. Aenean posuere, lacus ut molestie mattis, lorem sem auctor augue, fermentum congue purus neque in est. Ut at ex at erat
accumsan ullamcorper non ut nulla. Nulla finibus faucibus purus non tempor. Sed vestibulum malesuada ipsum, sit amet aliquam sapien rutrum vitae. Nullam fermentum pretium sem, in elementum ex venenatis sit amet. Nam suscipit quam eget dolor pulvinar
congue. Quisque ac mollis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam finibus sem eu felis luctus pulvinar. Morbi cursus diam nec nibh tempus, a ultricies diam ornare. Phasellus mattis
eros sed ante molestie pulvinar. Vivamus ultricies, justo et porttitor viverra, erat ante egestas risus, tempor finibus mi ex id tortor. Donec pretium, tellus sit amet congue aliquet, mi justo ornare nulla, et efficitur nunc augue a diam. Vestibulum
ac lorem dui. Donec eget eleifend mauris. Vivamus nec mauris nibh. Suspendisse eleifend porta elementum. Curabitur convallis fermentum dignissim. Nunc accumsan leo erat, vitae elementum leo euismod id. Nullam accumsan leo tellus, eget consectetur
leo eleifend non. Suspendisse gravida sodales arcu. Curabitur at euismod mauris. Phasellus quam ipsum, sollicitudin nec velit ac, tincidunt fringilla neque. Nunc sit amet ligula et ex imperdiet venenatis. Nam vulputate massa sed urna porttitor convallis
non sit amet quam. Etiam quis fermentum quam. Ut non tempus mi. Ut maximus orci in ante condimentum, ut porta magna cursus. Suspendisse sollicitudin consectetur sagittis. Ut ut quam augue. Aliquam sed interdum tellus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eros dolor, finibus eu dictum eget, facilisis ac magna. Nullam eget cursus metus. Nullam tellus diam, tincidunt ac nulla in, porttitor porttitor magna. Sed vel lacus massa. Nam suscipit
metus eu pharetra pulvinar. Nullam luctus sem ex, a pharetra justo luctus quis. Nunc gravida, risus eu elementum vestibulum, dui enim convallis ipsum, a congue felis elit ac quam. Praesent egestas nisl dui, ac imperdiet orci semper quis.</li>
<li>Integer accumsan lorem a aliquet scelerisque. Proin semper odio ornare pulvinar hendrerit. Fusce sit amet varius risus. Etiam blandit lacinia mi a consequat. Ut finibus malesuada dolor, sit amet interdum dui consequat ac. Nullam eget orci ante. Donec
ullamcorper sapien eget leo tincidunt, ac imperdiet quam faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin varius pretium. Nunc porttitor ipsum sit amet arcu auctor convallis. Vestibulum ac suscipit nibh,
in bibendum nulla. Donec ligula diam, luctus sed commodo ac, auctor vitae libero.</li>
</ul>
</body>
</html>
` element is outside the body. Fix that first.
– Rob Apr 06 '23 at 21:04element. My current method seems to make my issue even worse, will update when I'm happier with it. slugolicious- its not a side nav, its just text/disclaimer to be visible on the side, more important for sharing then reading. You're right that limiting it to not expand to 400% might make it difficult to read for some users. But I would still like to figure out/learn how to max it out in the way I'm describing.
– AccCode Apr 11 '23 at 13:58