216 lines
No EOL
3.8 KiB
CSS
216 lines
No EOL
3.8 KiB
CSS
@media screen and (max-width: 700px) {
|
|
|
|
/*===========GENERAL===========*/
|
|
h1{
|
|
font-size: 3vw;
|
|
}
|
|
body>#bienvenue>h1 {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
body>#bienvenue>h2 {
|
|
font-size: 2vw;
|
|
}
|
|
button#hautPage{
|
|
display:none;
|
|
}
|
|
|
|
/*===========NAVBAR===========*/
|
|
.topnav{
|
|
position: static;
|
|
}
|
|
.topnav input[type=text] {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
width: 76.5%;
|
|
margin: 0;
|
|
padding: 2vw;
|
|
border: none;
|
|
transform: none;
|
|
font-size: 3vw;
|
|
}
|
|
.topnav a {
|
|
float: none;
|
|
display: block;
|
|
text-align: left;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 2vw;
|
|
border: none;
|
|
transform: none;
|
|
font-size: 3vw;
|
|
|
|
}
|
|
.topnav a#kyflo{
|
|
font-size: 8vw;
|
|
text-align: center;
|
|
}
|
|
.topnav a#panier,
|
|
a#nous {
|
|
border: none;
|
|
}
|
|
.topnav a#panier{
|
|
width: 20%;
|
|
margin-right: -14%;
|
|
}
|
|
.topnav a#panier:hover{
|
|
margin-right: -14%;
|
|
}
|
|
.topnav a#nous:hover,
|
|
a#contactN:hover {
|
|
padding: 2vw 2vw;
|
|
}
|
|
.topnav a#loupe {
|
|
width: 5%;
|
|
padding: 1vw;
|
|
font-size: 3vw;
|
|
border-left: 0.1vw solid rgb(204, 25, 25)
|
|
}
|
|
.topnav input[type=text] {
|
|
border: 1px solid rgb(190, 73, 73);
|
|
}
|
|
.topnav a#panier>h3{
|
|
display:none;
|
|
}
|
|
/*===========FLEX CONTAINER===========*/
|
|
.flex-container>div {
|
|
width: 85%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.flex-container>div>a>img {
|
|
width: 20%;
|
|
margin-top: 3%;
|
|
margin-left: 10%;
|
|
}
|
|
.flex-container>div>a>h3,
|
|
.flex-container>div>a>h4 {
|
|
margin-left: 50%;
|
|
}
|
|
#content {
|
|
margin-left: 2vw;
|
|
margin-right: 2vw;
|
|
}
|
|
|
|
/*========FOOTER=========*/
|
|
tr {
|
|
border-bottom: 0.2vw solid red;
|
|
color: white;
|
|
height: 5vw;
|
|
}
|
|
|
|
th {
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
th#line {
|
|
border: none;
|
|
}
|
|
|
|
button#contactB {
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1.5vw 4vw;
|
|
font-size: 2vw;
|
|
color: lightgrey;
|
|
background-color: rgb(27, 27, 27);
|
|
border: 0.1vw solid rgb(204, 25, 25);
|
|
transform: skew(-.312rad);
|
|
margin-bottom: 2vw;
|
|
}
|
|
|
|
button#contactB:hover {
|
|
background-color: rgb(204, 25, 25);
|
|
transition-duration: 0.5s;
|
|
border-radius: 1vw;
|
|
}
|
|
|
|
td {
|
|
width: 20%;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
td#contact {
|
|
width: 100%;
|
|
}
|
|
|
|
/*=======FLEX CONTAINER========*/
|
|
|
|
.flex-container {
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-container>div {
|
|
width: 80%;
|
|
margin: 1vw;
|
|
line-height: 5vw;
|
|
}
|
|
|
|
.flex-container>div>a>h3 {
|
|
font-size: 3vw;
|
|
}
|
|
|
|
.flex-container>div>a>h4 {
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
.flex-container>div>a>img {
|
|
width: 20%;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
/*=====Produits=======*/
|
|
#Produit>h3 {
|
|
font-size: 2vw;
|
|
}
|
|
|
|
#Carac>h2 {
|
|
font-size: 2vw;
|
|
color: lightgrey;
|
|
}
|
|
|
|
#Client>div>h1 {
|
|
font-size: 2.8vw;
|
|
}
|
|
|
|
#Client>div>h3 {
|
|
font-size: 1.5vw;
|
|
}
|
|
|
|
input, select {
|
|
font-size: 2.5vw;
|
|
}
|
|
input[placeholder=Commentaire],
|
|
select,
|
|
input[placeholder="Question, suggestion, remarque"],
|
|
select {
|
|
width: 60%;
|
|
padding: 1vw 1vw;
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
input[type=submit],
|
|
select {
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
#Coms>form>h1 {
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
#content>h1 {
|
|
margin-top: 3vw;
|
|
font-size: 3vw;
|
|
}
|
|
|
|
#content>h2 {
|
|
font-size: 2.5vw;
|
|
}
|
|
|
|
#content>ul>li>h3 {
|
|
font-size: 2vw;
|
|
}
|
|
|
|
} |