0
Can anyone help me with HTML?
I am new to HTML..and i made a simple webpage using header, h1, h2, nav, ul, etc. it looked good in the maximize view of the browser but wen i resize the browser, the h2 element overlaps over the nav element..how do stop it from happening? how do i fix the size of the text so that the page can be viewed from any platform..?
10 Respuestas
+ 4
what you want to do is called responsive design. you need to use relative dimensions (em, percent) instead of absolute dimensions (pixels, points). that way the content shrinks/grows according to the browser window.
+ 4
Please use code playground.
It's easy to read as well as for testing.
The best part is others can try to modify your code immediately on their own code playground, give you a solution by sharing it out.
To share the code, we just need to press the below "+ Insert..." selection.
+ 3
Perhaps you could add the below @media to your css:
I just changed to the font-size of list, you can continue change other elements accordingly eg. header h1, header h3..
Let us know the result.
@media screen and (max-width: 1199px) {
li {
font-size: 30px;
}
}
@media screen and (max-width: 1049px) {
li {
font-size: 25px;
}
}
@media screen and (max-width: 886px) {
li {
font-size: 20px;
}
}
@media screen and (max-width: 729px) {
li {
font-size: 15px;
}
}
@media screen and (max-width: 573px) {
li {
font-size: 10px;
}
}
/* And you also need to change your li color to black #000, since your background is in white color. */
#list {
color: #000 !important;
}
+ 2
just append to your existing css
+ 1
i can think of different ways. But it would be very helpful if you could post your code here.
+ 1
@rohan
You can set some css particular for certain screen size only by setting the css under @media tag.
for example,
@media screen and (max-width:640px) {
/*
All the css setting here are only effective for screen size smaller or equal to 640px.
*/
}
+ 1
@calvin thanks
0
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Kitchen On Roads </title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<!--> <link href = "https://fonts.googleapis.com/css?family=Eagle+Lake" rel="stylesheet" type = "text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type = "text/css"> <-->
</head>
<body>
<header class="header">
<h1 id="h1"> Food Factory </h1>
<h3 id="h3"> eat all you see </h3>
</header>
<div class="nav">
<nav>
<ul id="list">
<li> Overview </li>
<li> Breakfast </li>
<li> Lunch </li>
<li> Dinner </li>
<li> Snacks </li>
<li> Soups and Salads </li>
<li> About Us </li>
</ul>
</nav>
</div>
<div class = "para">
<p>
</p>
</div>
</body>
</html>
0
umm thank you..but would you please teach me..where should i change my code?
0
@calvin what is @media screen{} ??
¿Tienes a menudo preguntas como esta?
Aprende gratis de forma más eficaz
En tendencia hoy
Someone can help me
2 Votes
X velocity
0 Votes
Files not linking in C++
0 Votes
I am a super beginner
0 Votes
Web Dev
0 Votes
Pls give me an idea
1 Votes
How this program executes?
0 Votes