Problems with responsiveness when resizing the browser
Clash Royale CLAN TAG#URR8PPPProblems with responsiveness when resizing the browser
I always have problems with the responsiveness of my website when resizing it, that letters grow and goes into each other when I increase the size. Somehow I can't fix this on my own.
My html code is:
<body>
<li class="aboutme"><a href="#">Over Mij</a></li>
<li class="resume"><a href="#">Resumé</a></li>
<li><img class="home_cartoon" src="cartoon.png"></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="contact"><a href="#">Contact</a></li>
</body>
And my code in CSS is this:
html {
position: relative;
min-height: 100%;
}
html, body {
margin: 0;
padding: 0;
background: #ffffff;
width: auto;
}
li {
list-style-type: none;
list-style-position: inside;
align-self: center;
}
a {
text-decoration: none;
color: #101b45;
font-family: Garamond;
font-weight: bold;
font-size: 250%;
}
a:hover {
color: #5166b7;
}
body {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 0px;
justify-items: center;
}
img {
height: 100%;
}
Can someone help me please?
1 Answer
1
For responsive design you have to avoid using static values as much as possible.
responsive design
static values
body {
display: grid;
grid-template-columns: repeat(5, 20%);
grid-column-gap: 0px;
justify-items: center;
}
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
