#html #css #media-queries
#HTML #css #медиа-запросы
Вопрос:
Я пытаюсь развернуть свой первый веб-сайт. К сожалению, у меня проблема с медиа-запросами. Я не знаю, как оформить медиа-запросы для мобильных устройств для одного из моих разделов.
.row {
margin-right: 0px;
margin-left: 0px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
.header {
width: 100%;
height: 100%;
position: relative;
}
.logo-small img {
margin: 0 auto;
width: 30%;
height: 10%;
padding-top: 30px;
margin-left: 60px;
}
.logo-small-retina {
margin: 0 auto;
display: none;
}
.main-logo {
position: relative;
text-align: center;
margin-bottom: 50px;
}
.main-logo img{
width: 15%;
height: 10%;
}
.main-logo-retina{
display: none;
}
.dream-header{
position: relative;
text-align: center;
margin-left: -40px;
}
.dream-header img{
width: 40%;
height: 10%;
}
.dream-header-retina{
display: none;
}
.map{
width: 100%;
height: 100%;
}
.map-retina{
display: none;
}
.ireland{
position: relative;
text-align: center;
margin-top: 65px;
}
.ireland img {
position: relative;
width: 40%;
height: 10%;
margin-top: -4%;
}
.ireland-retina{
display: none;
}
.sandra img {
/*display: block;
position: relative;
width: 105px;
margin-top: -50%;
margin-left: 14%;*/
}
.rollOver {
display: block;
width: 2%;
position: relative;
margin-left: 47.69%;
margin-top: -22.5%;
}
.sandra{
display: none;
position: relative;
width: 250%;
margin-top: -790%;
margin-left: -176%;
}
}
.sandra img {
display: block;
width: 100%;
position: relative;
}
.text-map{
position: relative;
text-align: center;
margin-top: 20%;
margin-bottom: 5%;
}
.text-map img {
position: relative;
width: 40%;
height: 10%;
display: block;
margin-top: 24%;
margin-left: 27%;
margin-right: 27%;
}
.text-map-retina{
display: none;
}
.iradio{
margin-top: 20px;
}
.iradio-logo{
position: relative;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.iradio-logo-retina{
display: none;
}
.iradio-logo img{
width: 10%;
height: 5%;
}
.garry-text{
position: relative;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.garry-text img{
width: 20%;
height: 10%;
}
.garry-text-retina{
display: none;
}
.garry{
width: 100%;
/*margin-top: 20px;*/
}
.garrybg{
position: relative;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
background: url("../images/garry-bg.png") no-repeat;
background-size: 100%;
text-align: center;
}
.centerVideo {
margin: auto;
width:33%;
}
.garrybg-retina{
display: none;
}
.enter{
width: 100%;
/*margin-top: 20px;*/
}
.enter-text{
position: relative;
text-align: center;
margin-top: 40px;
margin-bottom: 5px;
}
.enter-text img{
width: 10%;
height: 5%;
mar
}
.enter-text-retina{
display: none;
}
.win{
width: 100%;
height: 80%;
margin-top: 50px;
padding-top: 50px;
/*margin-top: 20px;*/
}
.chancetowin{
position: relative;
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.chancetowin img{
width: 70%;
height: 55%;
mar
}
.chancetowin-retina{
display: none;
}
::-webkit-input-placeholder {
color: red;
font-weight: bold;
}
:-moz-placeholder {
color: red;
font-weight: bold;
}
:-ms-input-placeholder {
color: red;
font-weight: bold;
}
.social-retina{
display: none;
}
.form-control{
margin-bottom: 5px;
}
.btn-submit{
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 50px;
display: block;
}
#btn {
border: 0;
text-align: center;
width: 80px;
margin-left: 50%;
margin-right: 50%;
margin-top: 10px;
}
#share{
text-align: center;
display: block;
width: 30%;
height: 10%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
}
.player .title{
display: none;
}
.fb-share-button{
margin: 4px 10px 0px 10px;
margin
display: block;
position: relative;
float: left;
}
.twitter-share-button{
margin: 10px;
display: block;
position: relative;
}
.footer{
position: relative;
width: 100%;
height: 100%;
}
.footer-vid{
width: 100%;
height: 700px;
}
.footer-vid-retina{
display: none;
}
@media only screen and (max-width: 400px){
.container-fluid{
width: 100%;
}
.row{
position: relative;
width: 100%;
}
.header{
width: 100%;
position: relative;
}
.logo-small{
display: none;
}
.logo-small-retina{
display: block;
position: relative;
padding-top: 10px;
margin-left: 10px;
}
.main-logo{
display: none;
}
.main-logo-retina{
display: block;
}
.main-logo-retina img{
position: relative;
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 105px;
margin-right: 105px;
}
.dream-header{
display: none;
}
.dream-header-retina{
display: block;
}
.dream-header-retina img {
position: relative;
width: 318px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 7px;
margin-right: 7px;
}
.map{
display: none;
}
.map-retina{
display: block;
}
.ireland{
display: none;
}
.ireland-retina{
display: block;
}
.ireland-retina img {
position: relative;
width: 318px;
margin-top: -5px;
margin-bottom: 10px;
margin-left: 7px;
margin-right: 7px;
}
.text-map{
display: none;
}
.text-map-retina{
display: block;
}
.text-map-retina img {
position: relative;
width: 318px;
margin-top: 35px;
margin-bottom: 10px;
margin-left: 7px;
margin-right: 7px;
}
.iradio{
width: 330px;
position: relative;
}
.iradio-logo{
display: none;
}
.iradio-logo-retina{
display:block;
}
.iradio-logo-retina img {
position: relative;
width: 40%;
margin-top: -12px;
margin-bottom: 10px;
margin-left: 93px;
margin-right: 69px;
}
.garry-text{
display: none;
}
.garry-text-retina{
display: block;
}
.garry-text-retina img {
position: relative;
width: 200px;
margin-top: 0;
margin-bottom: -31px;
margin-left: 69px;
margin-right: 69px;
}
.garrybg{
background: none;
}
.centerVideo{
width: 100%;
}
/* .garrybg-retina{
display: block;
height: 40px;
}
.garrybg-retina img {
position: relative;
width: 400px;
margin-top: -246px;
margin-bottom: -240px;
margin-left: -23px;
margin-right: 69px;
}*/
#garry-vid-retina{
margin-left: 117px;
margin-bottom: 0;
z-index: 1;
bottom: -48px;
}
.enter-text{
display: none;
}
.enter-text-retina{
display: block;
}
.enter-text-retina img {
position: relative;
width: 200px;
margin-top: -136px;
margin-bottom: -138px;
margin-left: 65px;
margin-right: 65px;
}
.win {
position: relative;
width: 100%;
height: 80%;
margin-top: 44px;
padding-top: 50px;
/* margin-top: 20px; */
}
.chancetowin{
display: none;
}
.chancetowin-retina{
display: block;
}
.chancetowin-retina img{
position: relative;
width: 340px;
margin-top: -35px;
margin-left: 6px;
margin-right: 6px;
}
.social{
display: none;
}
.social-retina{
display:block;
position: relative;
width: 100%;
}
.footer-vid{
position: relative;
width: 100%;
max-height: 100%;
height: 242px;
}
} <section class="contact-us" id="contact">
<div class="containernew">
<h2>text</h2>
<p>text text text text text text text text text text text text text text text text</p>
<p style="margin-bottom: 10px;"><i class="fas fa-phone"></i> 312 432 321</p>
<p><i class="fas fa-envelope"></i> @gmail.com</p>
<div class="contact-box">
<form action="POST" data-netlify=true netlify name="form">
<div class="name-email"><input type="text" placeholder="Imię " name="Imię">
<input type="email" placeholder="Email" name="Email"></div>
<div class="subject"><input type="text" placeholder="Temat" name="Temat"></div>
<div class="message"><textarea name="Your text" id="" cols="30" rows="10"
placeholder="Twoja wiadomość"></textarea></div>
<button>Wyślij wiadomość</button>
<div data-netlify-recaptcha ></div>
</form>
</div>
</div>
</section> Я попытался объяснить .containernew , почему медиа-запросы, но width , max-width похоже, как-то не работают.
Ответ №1:
Было бы полезно, если бы вы могли поместить свой код через валидатор W3C https://validator.w3.org /
В CSS, приведенном в вопросе, есть несколько проблем, таких как ложная правая скобка, а также некоторые ‘плавающие’ объявления, которые не завершаются должным образом, например margin
Если у вас все еще возникают проблемы после удаления этих ошибок, добавьте в свой вопрос фрагмент, который показывает проблему, с которой вы столкнулись, и мы можем взглянуть еще раз.