• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

RWD - media queries

Object Storage Arubacloud
0 głosów
208 wizyt
pytanie zadane 31 sierpnia 2017 w HTML i CSS przez jacobek02 Nowicjusz (200 p.)

Siemanko wszystkim, otóż mam problem z media queriesami, nie działają mi style w rozdzielczościach pomiędzy 800px szerokości a 500px. W walidatorze nic mi nie pokazuje, sam się nie mogę doszukać błędu, także podbijam do was. 

CSS media queriesow:


.container {margin:0 auto;}
.adressup {width:100%;}
.nav {width:100%;}
.downmenu {width:100%;}
 
@media (min-width: 1400px)
{

.navbarlist > li{width:480px;margin-left:50px; margin-right:50px;}
.logo{margin-right:90px;}
.margin{ width:20%; margin:0 6.5% 0 6.5%; text-align:center;}
}

@media (min-width: 1100px)
{

.container {width:980px;}
.downmenu {height:300px;}
.offer{width:980px;}
.aboutus{width:980px;}
.contact{width:980px;}
.navbarlist > li{width:210px;}
.margin{ width:20%; margin:0 6.5% 0 6.5%; text-align:center;}
}
@media (max-width: 1100px) and (min-width: 1000px)
{

.margin{ width:20%; margin:0 6.5% 0 6.5%; text-align:center;}
.downmenu {height:300px;}
.container{width:950px;}
.offer{width:950px;}
.aboutus{width:950px;}
.contact{width:950px;}
.till1{width:276px; margin:0px 20px 0px 20px; text-align:center;}
.till2{width:276px; margin:0px 20px 0px 20px; text-align:center;}
.navbarlist > li{width:170px;}
.adresscontainer{font-size:28px; text-align:center;}
}
@media (max-width: 1000px) and (min-width: 800px)
{


.downmenu {height:570px;}
.container {width:750px;}
.offer{width:750px;}
.aboutus{width:750px;min-height:1489px;}
.contact{width:750px;}
.till1{width:315px; margin:10px 30px 10px 30px; text-align:center;}
.till2{width:315px; margin:10px 217.5px 10px 217.5px;}
.navbarlist > li{width:150px;margin-left:5px; margin-right:5px; padding:5px;}
.navbarlist > li:firstchild{margin-left:0px;}
.navbarlist{margin-left:0px; margin-right:0px;}

.adresscontainer{font-size:24px; text-align:center;}
#formularz{margin:0px 225px 0px 225px;}
.beforeform{width:260px; margin:0 auto; margin-bottom:20px;}
.adresscontainer{width:469.7px; margin:0px 140.15px 0px 140.15px; text-align:center;}
.margin{ width:20%; margin:0 6.5% 0 6.5%; text-align:center;}
.margin span{margin-left:0px;}
footer{width:100%;}
.adressup{width:100%;}
nav{width:100%;}

}

@media (max-width: 800px) and (min-width: 500px)
{

.margin{width:20%; margin:0 6.5% 0 6.5%;text-align:center;}
.downmenu {height:770px;}

.container {width:450px;}
.offer{width:450px;}
.aboutus{width:450px;}
.contact{width:450px;}
#formularz{width:320px;margin:0px 65px 0px 65px;}
footer{width:100%;}
.adressup{width:750px; margin:0 auto;}
nav{width:750px; margin:0 auto;}
}

@media (max-width: 500px){

.margin{ width:20%; margin:0 6.5% 0 6.5%; text-align:center;}
.downmenu {height:570px;}

.container {width:300px;}
.offer{width:300px;height:2800px;}
.aboutus{width:300px;height:1990px; margin:0 auto; text-align:center;}
.contact{width:300px;}
.navbarlist > li{width:100%; background-color:antiquewhite;margin:0;border:none;}
.navbarlist >li:firstchild{border-left:none;}
.logo{display:none;}
.till1{clear:both; width:280px; margin:0px 10px 0px 10px;}
.till2{clear:both; width:280px; margin:0px 10px 0px 10px;}
.adress{margin-right:5px;}
#formularz{width:210px;margin-left:30px;}
#formularz input{width:210px;}
#formularz textarea{width:210px;}
.beforeform{text-align:center; margin:0 auto; padding-bottom:10px;}
}

Z góry dzięki za pomoc!

2 odpowiedzi

0 głosów
odpowiedź 31 sierpnia 2017 przez jacobek02 Nowicjusz (200 p.)
<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <title></title>
    
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    <link rel="stylesheet" type="text/css" href="main.css"/>
    <link rel="stylesheet" type="text/css" href="css/fontello.css"/>
    <link href="https://fonts.googleapis.com/css?family=Lato|Roboto:700" rel="stylesheet">

    
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates:700" rel="stylesheet">

</head>

<body>
<article>
    <div class="adressup">
        <div class="adress">
            <div class="adresselementss">Skontaktuj się z nami ! </div>
            <i class="icon-phone"></i><p class="adresselements">:609771033 / 713659871 </p>
        <div style="clear:both;"></div>
            <i class="icon-location"></i><p class="adresselements">:ul. Reymonta 101a, Gliwice </p>
             
        </div>
    </div>
</article>    
    <nav>
        <div class="logo"> 
        <a href="#"><img src="img/logo.png" alt="ailomar" title="ailomar"/></a>
        </div>
        <ol class="navbarlist">
       <li><a href="#">o nas</a></li>     
        <li><a href="#">oferta</a></li> 
        <li><a href="#">kontakt</a></li>   
                
            
        </ol>
        
        
        
        
    </nav>	
 <main>
      <article>
	      <div class="container">
	       <div class="aboutus">
              <div class="imgcontainer">
	              <img src="img/aboutsus2.png"/></div>
	              <div class="hcontainer">
	                  <h1> O nas</h1>   </div>
	              
	                 <section>
	                     <div class="till1">
                         <i class="icon-address-card-o"></i>
	                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mattis sapien, vitae bibendum urna. Integer eu lorem dapibus, aliquet massa vel, scelerisque ante. Proin dignissim, lacus et pulvinar mattis, nisl dolor elementum nisl, quis luctus neque sem viverra nisi. Duis sodales, dolor at pharetra vulputate, lectus augue ullamcorper mauris, a molestie ante eros vel libero. Pellentesque augue ipsum, sagittis eu vehicula sit amet, auctor vitae lacus. Cras fringilla ac nisi eu pulvinar.  </p>
	                         
	                         
	                     </div>
	                     
	                 </section>
	                 <section>
	                     <div class="till1">
                         <i class="icon-doc-text-inv"></i>
	                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mattis sapien, vitae bibendum urna. Integer eu lorem dapibus, aliquet massa vel, scelerisque ante. Proin dignissim, lacus et pulvinar mattis, nisl dolor elementum nisl, quis luctus neque sem viverra nisi. Duis sodales, dolor at pharetra vulputate, lectus augue ullamcorper mauris, a molestie ante eros vel libero. Pellentesque augue ipsum, sagittis eu vehicula sit amet, auctor vitae lacus. Cras fringilla ac nisi eu pulvinar.  </p>
	                         
	                         
	                     </div>
	                     
	                 </section>
	                 <section>
	                     <div class="till2">
                         <i class="icon-mail"></i>
	                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mattis sapien, vitae bibendum urna. Integer eu lorem dapibus, aliquet massa vel, scelerisque ante. Proin dignissim, lacus et pulvinar mattis, nisl dolor elementum nisl, quis luctus neque sem viverra nisi. Duis sodales, dolor at pharetra vulputate, lectus augue ullamcorper mauris, a molestie ante eros vel libero. Pellentesque augue ipsum, sagittis eu vehicula sit amet, auctor vitae lacus. Cras fringilla ac nisi eu pulvinar.  </p>
	                         
	                         
	                     </div>
	                     
	                 </section>
	                  
	                   
	                      </div>
	              </article>
        <article>
            <div class="offer">
               <div class="imgcontainer"> 
                   <i class="icon-briefcase"></i></div>
                   <div class="hcontainer">
                       <h1>Oferta</h1>
                   </div>
                   <section>
               <div class="listcontainer">
                  <p>Biorąc pod uwagę potencjalne potrzeby przedsiębiorstw oraz jednostek gospodarczych działających na rynkach,
krajowym i europejskim firma PPHU „ENERGOTEL” pragnie przedstawić państwu ofertę współpracy.</p>
                  <strong>Instalacje energo-elektryczne:</strong>
                   <ol class="offerlist">
                      <li class="offerli">Projektowanie linii instalacji elektrycznych, kanalizacji teletechnicznej, sieci telekomunikacyjnych i światłowodowych,</li>
                      <li class="offerli">Remonty instalacji elektrycznych, telekomunikacyjnych i telewizyjnych,</li>
                      <li class="offerli">Budowa przyłączy energetycznych,</li>
                      <li class="offerli">Budowa instalacji elektrycznych, telekomunikacyjnych i telewizyjnych w budynkach mieszkalnych i przemysłowych,</li>
                      <li class="offerli">Budowa, modernizacja i konserwacja sieci telewizji kablowej,</li>
                      <li class="offerli"> Budowa elektrycznego oświetlenia ulic, placów i parków,</li>
                      <li class="offerli">Modernizacje instalacji elektrycznych w obiektach budowlanych,</li>
                      <li class="offerli">Projektowanie i wykonywanie instalacji odgromowych.</li>
                      
                       
                   </ol>
                   <strong class="strong">Kompleksowa kontrola stanu technicznego instalacji elektrycznych 
i piorunochronnych w obiektach budowlanych, zgodnie z Prawem Budowlanym 
z dnia 7 lipca 1994, art. 62, ust. 1, pkt 2 w tym:</strong>
                  <ol class="offerlist">
                      <li class="offerli">Projektowanie linii instalacji elektrycznych, kanalizacji teletechnicznej, sieci telekomunikacyjnych i światłowodowych,</li>
                      <li class="offerli">Remonty instalacji elektrycznych, telekomunikacyjnych i telewizyjnych,</li>
                      <li class="offerli">Budowa przyłączy energetycznych,</li>
                      <li class="offerli">Budowa instalacji elektrycznych, telekomunikacyjnych i telewizyjnych w budynkach mieszkalnych i przemysłowych,</li>
                      <li class="offerli">Budowa, modernizacja i konserwacja sieci telewizji kablowej,</li>
                      <li class="offerli"> Budowa elektrycznego oświetlenia ulic, placów i parków,</li>
                      <li class="offerli">Modernizacje instalacji elektrycznych w obiektach budowlanych,</li>
                      <li class="offerli">Projektowanie i wykonywanie instalacji odgromowych.</li>
                      </ol>
                   <strong class="strong">Badania odbiorcze:</strong>
                   <ol class="offerlist">
                       <li class="offerli">Badania odbiorcze instalacji elektrycznych,</li>
                       <li>Badania odbiorcze maszyn i urządzeń,</li>
                       <li>Wykonywanie protokołów zgodności.</li>
                   </ol>
                   
               </div>
                </section>
                
            </div>   
        </article>
	          
	          <article>
	              <div class="contact">
	                 <div class="imgcontainer">
	                     <i class="icon-mail-alt"></i>
	                 </div> 
	                  <div class="hcontainer">
	                      <h1>Kontakt</h1>
	                  </div>
	                  <div class="beforeform">Zachęcamy do skontaktowania się poprzez formularz kontaktowy, postaramy się odpowiedzieć tak szybko, jak to możliwe.</div>
	                  <div id="formularz">
	                 
<form>
        
    <label>Imię i nazwisko:</label>
    <input name="name" placeholder="Imię i nazwisko" onfocus="this.placeholder=''" onblur="this.placeholder='Imię i nazwisko'">
            
    <label>E-mail:</label>
    <input name="email" type="email" placeholder="adres@mail.com" onfocus="this.placeholder=''" onblur="this.placeholder='adres@mail.com'">
            
    <label>Wiadomość:</label>
    <textarea name="message" placeholder="Napisz tu wiadomość." onfocus="this.placeholder=''" onblur="this.placeholder='Napisz tu wiadomość.'"></textarea>
            
    <input id="submit" name="submit" type="submit" value="Wyślij">
        
</form>
</div>
	       <div class="adresscontainer">
	           <div class="phonenumber">
	               <i class="icon-phone-1"></i>Telefon: 123456789/781967451
	               <br/>
	               
	               
	           </div>
	           <div style="clear: both;"
	           <div class="companyadress">
	               <i class="icon-location-1"></i>Adres: Ul.Reymonta 101a, Gliwice
	           </div>
		<div class="mailadress"><i class="icon-mail-alt-1"></i> Mail: ailomar@wp.pl</div>
	       </div>           
	                  
	              </div>
	              
	              
	          </article>
<div style="clear:both"></div>
	                            
	   <div class="downmenu">
			<br/>
		<div class="menuelement margin"><a href="#"><h1> O nas</h1></a></div>
		
		<div class="menuelement2 margin"><a href="#"><h1> Oferta</h1></a></div>
		<div class="menuelement3 margin"><h1> Kontakt:</h1></div>
		<div style="clear:both;"></div>
		<div class="menucontent1 margin"><span>Ailomar</span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac dui enim. Fusce placerat fringilla tellus a bibendum. Phasellus  sagittis tellus at... <a href="#">Dowiedz się więcej.</a></div>
		<div class="menucontent2 margin"><span>Oferujemy</span> między innymi sit amet, consectetur adipiscing elit. Curabitur ac dui enim. Fusce  placerat fringilla tellus a bibendum. Phasellus sagittis tellus at... <a href="#">Dowiedz się więcej.</a></div>
	<div class="menucontent3 margin">
		<div class="downnumber"><i class="icon-phone-2"></i>Telefon :123456789 / <span>753215678</span></div>
		<div class="downadress"><i class="icon-location-2"></i>Adres:
Ul.Reymonta 101a, <span>Gliwice, 59-900</span></div>
		<div class="downmail"><i class="icon-mail-alt-2"></i>Mail: yoyoyo@wp.pl</div>

	</div>


		</div>
	      
	                                                   
   </div>
	 </main> 
<footer>
Copyright &copy 2017  PPHU Ilomar - firma świadcząca usługi elektryczne.

</footer>  
	    
	
	
	
</body>
</html>

Tu jeszcze html

0 głosów
odpowiedź 31 sierpnia 2017 przez jacobek02 Nowicjusz (200 p.)
I reszta css, jakbyk ktoś potrzebował ;):
/*font-family: 'Roboto', sans-serif;*/
/*Font license info


## Elusive

   Copyright (C) 2013 by Aristeides Stathopoulos

   Author:    Aristeides Stathopoulos
   License:   SIL (http://scripts.sil.org/OFL)
   Homepage:  http://aristeides.com/


## Font Awesome

   Copyright (C) 2016 by Dave Gandy

   Author:    Dave Gandy
   License:   SIL ()
   Homepage:  http://fortawesome.github.com/Font-Awesome/


*/
body 
{
    margin:0;
    font-family: 'Lato', sans-serif;
    
}
.adressup
{
    width:100%;
        background-color:#666666;
            height: 98px;
  


}
.adress
{
     color: #f2f2f2;
    font-size:20px;
    font-family: 'Roboto', sans-serif;
    text-align: right;
    padding-top: 7px;
    margin-right: 10px;
    font-weight:500;
}
.adresselements
{
margin: 0;  
   float:right;
   
    margin-top: 4px;
    
}
nav
{
    width: 100%;
    background-color:antiquewhite;
        height:160px;
    text-align: center;
    margin-bottom: 0px;
}
.logo 
{
    margin-left:15px;
    float: left;
    margin-top: 0px;
    margin-right:35px;
    
}
.navbarlist
{
   margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 25px;
    height: 75px;
   line-height: 300%;
    font-family: 'Montserrat Alternates', sans-serif;
}
.navbarlist a
{
    color:#2f2f2f;
    text-decoration: none;
    display:block;
    
}
.navbarlist > li
{
    float: left;
    width: 180px;
    margin-top:30px;
    border-right: 2px dashed grey;
    margin-left: 0px;
    margin-right:0px;
    
    
}
.navbarlist > li:first-child
{
    border-left: 2px dashed grey;
    margin-left: 0px;
}
.navbarlist >  li:hover
{
    background-color:oldlace;
    
}
.navbarlist > li:hover > a 
{
   color:black; 
    
}
.container 
{
    margin: 0 auto;
    width: 980px;
    
    
}

.imgcontainer
{
    text-align: center;
    padding-top: 40px;
}
.hcontainer 
{
    font-family: 'Montserrat Alternates', sans-serif;
    text-align: center;
    font-size: 30px;
    margin: 0 auto;
    padding: 10px;
    letter-spacing: 1px;
    color:  black;


}
.till1 
{
    width:286px;
    font-size:20px; 
    padding: 0;
    margin:10px 20px 10px 20px;
    text-align:center;
    float: left;
}
.till2
{

    width:286px;
    font-size:20px; 
    padding: 0;
    margin:10px 20px 10px 20px;
    text-align:center;
    float: left;

}
.aboutus
{
    background-color:#ffcc99;
    min-height:1000px;
    width: 100%;
}
.offer 
{
    width: 980px;
    background-color: #ffbf80;
    height: 1350px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
}
.hsmaller
{
    font-size:57px;
}
.offer ol > li
{
 text-align: left;
    margin-top: 3px;
}
.offer ol
{
    margin-left: 10px;
    list-style-type: none;
}
.offer ol > li:before
{
     margin-right: 5px;
    content:"⚡";
}
.strong
{
 margin-top:10px;
}

.contact
{
    background-color:#ffcc99;
    height:1200px;
    width: 980px;
    margin: 0 auto;
}
#formularz {
 width:270px;
margin-left:30px;
background-color:#ffebcc;
padding:20px;
border:2px solid #e68a00; 
border-radius:10px; 
margin-top:10px;
-webkit-box-shadow: 3px 3px 30px 5px #ff8000;
-moz-box-shadow: 3px 3px 30px 5px #ff8000;
box-shadow: 3px 3px 30px 5px #ff8000;
    float: left;
}
#formularz label 
{
display:block;
margin-bottom:5px;
font-weight: bold;
text-transform:uppercase;
font-size:14px;
margin-top:5px;
color:#555555;
text-align:center;
}
#formularz textarea,
#formularz input
{
padding:5px;
border-radius:5px;
border:1px solid #ccc;
margin-bottom:10px;
width:255px;
box-sizing: border-box;
height: 40px;
outline:none;

}
#formularz input:focus,
#formularz textarea:focus
{
-webkit-box-shadow: 0px 0px 10px 2px #ff8000;
-moz-box-shadow: 0px 0px 10px 2px #ff8000;
box-shadow: 0px 0px 10px 2px #ff8000;
background-color: #ffffe6;
}
#formularz input#submit
{
cursor:pointer;
margin-bottom:0px;
margin-top: 10px;
font-weight:bold;
color:white;
background-color: #36b03c;
border: none;
font-size: 18px;
letter-spacing: 0.5px;
}
#formularz textarea
{
height:90px;

}
#formularz input#submit:hover
{
background-color: #37b93d;
-webkit-box-shadow: 0px 0px 15px 5px #ff8000;
-moz-box-shadow: 0px 0px 15px 5px #ff8000;
box-shadow: 0px 0px 15px 5px #ff8000;
}
#formularz input#submit:focus
{
-webkit-box-shadow: 0px 0px 15px 5px #ff8000;
-moz-box-shadow: 0px 0px 15px 5px #ff8000;
box-shadow: 0px 0px 15px 5px #ff8000;
}
.beforeform
{
    width:260px;
    margin-left:55px;
    text-align: center;
    font-size:20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.adresscontainer 
{
    float:right;
    margin-right: 17px;
    font-weight: bold;
    font-size:33px;
    
    
}
.phonenumber 
{
    margin-top:80px;
    margin-bottom: 30px;
    
}
.companyadress
{
margin-bottom:30px;
}
.downmenu
{
background-color:grey;
width:980px;
margin:0 auto;
height:300px;
padding:0;
}
.menuelement
{

padding:0;
color:#fff;
float:left;
}
.menuelement a
{
color:white;
text-decoration-color:white;

}
.menuelement2
{
color: white;
float:left;
text-align:center;
margin-top:0px;

}
.menuelement2 a
{
color:white;
text-decoration-color:white;

}
.menuelement3
{
color: white;
float:left;
text-align:center;
text-decoration:underline;
text-decoration-color:white;
}
footer
{
width:100%;
background-color:darkgrey;
text-align:center;
padding:15px 0px;
color:white;
font-size:16px;
}
.menucontent1
{
width:200px;
margin-left:78px;
text-align:center;
color:White;
float:left;
height:100px;
}
.menucontent1 span
{
font-weight:bold;
font-size:19px;
}
.menucontent1 a
{
color:white;
font-size:17px;
}
.menucontent1 a:hover
{
color:blue;
}
.menucontent2
{
width:200px;
margin-left:100px;
text-align:center;
color:White;
float:left;
height:100px;
}
.menucontent2 span
{
font-weight:bold;
font-size:19px;
}
.menucontent2 a
{
color:white;
font-size:17px;
}
.menucontent2 a:hover
{
color:blue;
}
.menucontent3
{
width:300px;
float:left;
text-align:center;
margin-left:60px;
color:white;
font-weight:bold;
font-size:19px;

}
.menucontent3 span
{
margin-left:0px;
}
.downmail
{
margin-left:-14px;
}


 

Podobne pytania

0 głosów
2 odpowiedzi 493 wizyt
pytanie zadane 6 marca 2019 w HTML i CSS przez ricksanchez1943 Początkujący (260 p.)
0 głosów
4 odpowiedzi 397 wizyt
pytanie zadane 1 grudnia 2018 w HTML i CSS przez Piotr Jarema Użytkownik (970 p.)
0 głosów
1 odpowiedź 122 wizyt

92,555 zapytań

141,403 odpowiedzi

319,557 komentarzy

61,940 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...