CODEWITHSUNDEEP
htmlcss
General Zlatan
General Zlatan

Reputation: 75

Problems 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 code is:

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%;
}
<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>

Can someone help me please?z

Upvotes: 0

Views: 53

Answers (2)

Sumugan Swaroop
Sumugan Swaroop

Reputation: 56

In order to make your HTML page responsive and avoid overlapping of text, use CSS media rules for different widths. For example:

@media screen and (max-width: 480px) { 
     a {
         font-size: 150%; // change the value as required for widths less than 480px
     }
}

Hope this helps.

Upvotes: 4

user10145552
user10145552

Reputation:

For responsive design you have to avoid using static values as much as possible.

body {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-column-gap: 0px;
    justify-items: center;
}

Upvotes: 2

Related Questions