Привет, ищу помощь с моим HTML и CSS, что делает его отзывчивым - PullRequest
Новая
       8

Привет, ищу помощь с моим HTML и CSS, что делает его отзывчивым

0 голосов
/ 19 февраля 2019

Мне нужна помощь, чтобы мой HTML реагировал на все размеры экрана.Я пробовал @media, но, похоже, он не работает, может быть, я включаю неправильные элементы?

Спасибо!

У меня есть еще 1 вопрос, если я должен использовать обертку вокруг своих элементов вместоborder?

Я хочу сделать разрыв между class = main и class = navigation.Как я сделал между заголовком и основным (сделал это с атрибутом margin), но по какой-то причине я не могу заставить его работать с оставленным значением margin ... left ...

Есть предложения?

Спасибо! 

 {
  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>

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Проверьте свой CSS.Как уже упоминали другие, есть пара ошибок.В дополнение к этому в качестве краткого совета попробуйте сделать тег H1 красивым, когда он отзывчивый.В настоящее время «Ресторан Тосканы» состоит из двух строк при изменении размера браузера.

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

Отредактировано Скрипка

0 голосов
/ 19 февраля 2019

быстрое решение вашей проблемы:

1) пропущенные фигурные скобки '{}'

2) Метод, который я использовал для медиазапроса: @media и (max-width: 600)px) Медиа-запрос должен быть закрыт следующим образом: 

@media and (max-width: 600px) {
 nav, article {
    width: 100%;
    height: auto;
 }
}
0 голосов
/ 19 февраля 2019

Надеюсь, что эта помощь

Пожалуйста, прочитайте о медиа-запросе Читать здесь

Вы не можете закрыть тег div или медиа-запроса. 

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