CODEWITHSUNDEEP
htmlcssresponsive
Erki Kurvits
Erki Kurvits

Reputation: 1

Hi looking for help whit my HTML and CSS making it responsive

I'm looking help to make my HTML responsive whit all screen sizes. I have tried @media but it doesn't seem to work, maybe I include wrong elements?

Thank you!

I have 1 more question should I use wrapper around my elements instead of the border?

I want to make a gap between class=main and class=navigation. Like I have done between the header and main( done it whit margin attribute) but for some reason, I can't make it work whit margin-left value...

Any suggestions?

Thank you!

 {
  box-sizing: border-box;
  margin: 0px;
}

.head header {
 border: 1px solid;
 width : 100%;
 background-color: #4ca730;
 line-height: 150px;
 text-align: center;
}

.head h1 {
 display : inLine;
 color: #ecee1b;
 margin-top: 100px;
 margin-left: 1%;

}

.head img {
 padding-left: 10px; 	 
 background-image:url("Images/spaghetti.jpg");
 display: inLine;
 float : left;
}

.navigation {
 height: 400px;
 border-right: 1px solid;
 float: left;
 background-color: #4ca730;
}
nav a {
 display: block;
 padding-top: 20px;
 padding-left: 10px;
}
.form {
margin-top: 5%;
margin-left: 5%;
margin-right: 5%;
border-bottom: 1px solid;
border-top: 1px solid;
border-left: 1px solid;
background-color: gray;
}
.main {
 column-gap: 2em;
 height: 380px;
 margin-left: 5%;
 margin-top:1%;
 margin-bottom: 1%;
 border: 1px solid;
}
.main img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
}
.main p {
 text-align: center;
 margin-top: 3%;
}

footer {
 border: 1px solid;
 background-color: #4ca730;
}

p {
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
}

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <head>
  <link rel="stylesheet" type="text/css" href="tuscany.css"/>
  
  <title>Tuscany Restaurant</title>
</head>

<body>
<div class="head">
 <header>
    <a href="Home.html">
	<img src="Images/spaghetti.jpg" width="200" height="150">
	</a>
   <h1>Tuscany Restaurant</h1>
   </header>
   </div>
   
<div class="navigation">
  <nav>
   <a href="Home.html">Home</a>
   <a href="Menu.html">Menu</a>
   <a href="Contact.html">Contact Us</a>
  </nav>
  <div class="form"
   <form action="/action_page.php">
  Username: <input type="text" name="usrname"><br>
  Password: <input type="text" name="pwd"><br>
  <input type="checkbox" name="remember" value="remember"> Remember me next time<br> 
  <input type="Submit" value="Log in">
</form>
</div>
</div>

<div class="main">
 <article>
  <img src="Images/restaurant.jpg" width="200" height="150">
 <p>Tuscany is Italian Restaurant. Tuscany Restaurant serves pasta,
pizza and beverages.</p>
</article>
</div>

<footer>
  <p>Last Update:20.02.2019<p>
   <p>Created By: Erki Kurvits<p>
</footer>

  
</body>
</html>

Upvotes: 0

Views: 70

Answers (3)

Hailey
Hailey

Reputation: 21

a quick solution for your issue:

1) missing '{}' curly brackets

2)The method I used for media query: @media and (max-width: 600 px) Media query should be closed like this:

@media and (max-width: 600px) {
 nav, article {
    width: 100%;
    height: auto;
 }
}

Upvotes: 0

Becky
Becky

Reputation: 5585

Check your css. As others have mentioned there are couple of mistakes. In addition to this as a quick tip try to make the H1 tag look nice when it's responsive. Currently "Tuscany Restaurant" comes as two lines when the browser is being resized. 

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
header a, header h1 {
    display: flex;
    margin: 0 auto;
  }
}

Edited Fiddle

Upvotes: 1

jaydeep patel
jaydeep patel

Reputation: 917

Hope this help

Please read about media query Read here

Your are miss to close div or media query tag.

@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;}
}

Upvotes: 0

Related Questions