My responsive didnt work i dont understand, hepl


#1

my site web is here:
lemanhattan.hol.es

mon code responsive:
@media ( max-width: 768px){

menu{display: block;}

menu li{

background-color: none;
border: 5px solid black;
display: inline-block;
border-radius: 15px;
font-size: 150%;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
}

bienvenue_mot{font-size: 300%;}

.boite1{
width: 100%;
height: 250px;
background-color:black;
border: 5px solid black;
margin-top: 30px;
display: inline-block;
opacity: 0.9;

}
.boite1 img{
height: 250px;
width: 250px;
}

.com{
display: inline-block;
color: white;
position: absolute;
margin-left: 20px;
margin-top: 12px;
}

.com p{
font-size:130%;
}

.com h1{
font-size: 130%;
}

cartecom{

height: 100%;
width: 100%;
background-color: none;
position: relative;
bottom: 0em;
text-align: center;
font-size: 140%;
margin-bottom:300px;

}

numero{

font-size: 100%;
width: 100%;
height: 100%;
margin-right: 100px;

}
.map{
display: none;
}

boitein_entrees{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pizzas{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pates{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_carte{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_dessert{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_menu{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

ici{margin-top: 250px;

margin-left: 220px;
}
}

@media ( max-width: 1024px){
#menu{display: block;}

menu li{

background-color: none;
border: 5px solid black;
display: inline-block;
border-radius: 15px;
font-size: 150%;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
}

bienvenue_mot{font-size: 300%;}

.boite1{
width: 100%;
height: 250px;
background-color:black;
border: 5px solid black;
margin-top: 30px;
display: inline-block;
opacity: 0.9;

}
.boite1 img{
height: 250px;
width: 250px;
}

.com{
display: inline-block;
color: white;
position: absolute;
margin-left: 20px;
margin-top: 12px;
}

.com p{
font-size:130%;
}

.com h1{
font-size: 130%;
}

cartecom{

height: 100%;
width: 100%;
background-color: none;
position: relative;
bottom: 0em;
text-align: center;
font-size: 140%;
margin-bottom:300px;

}

numero{

font-size: 100%;
width: 100%;
height: 100%;
margin-right: 100px;

}
.map{
display: none;
}

boitein_entrees{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pizzas{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pates{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_carte{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_dessert{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_menu{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

ici{margin-top: 250px;

margin-left: 220px;
}
}
@media ( max-width: 1360px){
.map{display: none;}
#menu{display: block;}

menu li{

background-color: none;
border: 5px solid black;
display: inline-block;
border-radius: 15px;
font-size: 150%;
margin-left: 10px;
margin-right: 10px;
padding: 20px;
}

bienvenue_mot{font-size: 300%;}

.boite1{
width: 100%;
height: 250px;
background-color:black;
border: 5px solid black;
margin-top: 30px;
display: inline-block;
opacity: 0.9;

}
.boite1 img{
height: 250px;
width: 250px;
}

.com{
display: inline-block;
color: white;
position: absolute;
margin-left: 20px;
margin-top: 12px;
}

.com p{
font-size:130%;
}

.com h1{
font-size: 130%;
}

cartecom{

height: 100%;
width: 100%;
background-color: none;
position: relative;
bottom: 0em;
text-align: center;
font-size: 140%;
margin-bottom:300px;

}

numero{

font-size: 100%;
width: 100%;
height: 100%;
margin-right: 100px;

}
.map{
display: none;
}

boitein_entrees{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pizzas{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_pates{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

plats{margin-left: 150px;}

boite_dessert{margin-left: 50px;}

boite_menus{margin-left: 50px;}

boite_entrees{margin-left: 50px;}

boite_carte{margin-left: 50px;}

boite_pizzas{margin-left: 50px;}

boite_pates{

margin-left: 50px;

}

boitein_carte{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_dessert{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

boitein_menu{

background-image: url("../images/manhattan1.jpg");
padding: 15px;
width: 270px;
height: 700px;
background-color: white;
position: relative;

}

ici{margin-top: 180px;

margin-left: 600px;
}
}


#2

In your website you have a space in the file name thus when you open the website it doesn't load your index.html

you have: index .html
change to: index.html


#3

thx , but my responsive code wouldn't work ...


#4

inside your css, .map has a left: 1250px, that is a big problem, i suggest you fix it (make left smaller or something)


#5

i modify this but nothing change


#6

lets change it to 70em, which will still push it so far to the right.....