Bonjour,
Je développe mon site internet sous Wordpress. J'ai mis dans un widget un code HTML qui me permet d'avoir sur une seule ligne, trois blocs en biais (en dessous du slider)
En allant vérifier le responsive de mon site, je constate que ces trois blocs ne s'affichent pas correctement sur mon mobile ou tablette.
Pouvez vous m'aider à corriger ce problème ? Je vous donne les codes :
Voici le code HTML
Sinon, vous pouvez aller directement sur mon site (en état de projet) : http://www.zoomjuridique.fr
Merci de votre aide.
Albert
Je développe mon site internet sous Wordpress. J'ai mis dans un widget un code HTML qui me permet d'avoir sur une seule ligne, trois blocs en biais (en dessous du slider)
En allant vérifier le responsive de mon site, je constate que ces trois blocs ne s'affichent pas correctement sur mon mobile ou tablette.
Pouvez vous m'aider à corriger ce problème ? Je vous donne les codes :
/************
TABLEAU
************/
#reservation-commande {
height: 170px;
margin-top: 40px;
margin-bottom: 20px;
}
#reservation-commande-content {
width: 100%;
height: 115px;
margin-top: 25px;
position: relative;
z-index: 20;
}
#reservation-commande-content > ul {
height: 100%;
width: 100%;
}
#reservation-commande-content > ul > li {
width: 280px;
height: 100%;
background-color: #eaeaea;
position: relative;
float: left;
list-style: none;
cursor: pointer;
display: table;
}
#reservation-commande-content > ul > li#where {
}
#reservation-commande-content > ul > li#when {
margin-left: 50px;
width: 235px;
}
#reservation-commande-content > ul > li#how {
margin-left: 50px;
width: 235px;
}
#reservation-commande-content > ul > li#go {
background-color: #ee7f00;
color: #fff;
float: right;
font-family: Arial Black, Arial;
font-weight: 900;
font-size: 23px;
text-align: center;
text-transform: uppercase;
width: 78px;
line-height: 115px;
}
#reservation-commande-content > ul > li#go:before {
border-color: transparent #ee7f00 transparent transparent;
border-style: solid;
border-width: 115px 46px 0 0;
content: "";
height: 0;
left: -46px;
position: absolute;
width: 0;
}
#reservation-commande-content > ul > li#go.done {
background: #000;
}
#reservation-commande-content > ul > li#go.done:before {
border-color: transparent #000 transparent transparent;
}
#reservation-commande-content > ul > li#go:hover {
background: #000;
color: #ee7f00;
}
#reservation-commande-content > ul > li#go:hover:before {
border-color: transparent #000 transparent transparent;
}
#reservation-commande-content > ul > li#go.done:hover {
background: #000;
color: #ee7f00;
}
#reservation-commande-content > ul > li.after-triangle:after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 115px 45px 0 0;
border-color: #eaeaea transparent transparent;
position: absolute;
left: 280px;
cursor: pointer;
top: 0;
}
#reservation-commande-content > ul > li#when.after-triangle:after,
#reservation-commande-content > ul > li#how.after-triangle:after {
left: 235px;
}
#reservation-commande-content > ul > li.before-triangle:before {
border-color: transparent #eaeaea transparent transparent;
border-style: solid;
border-width: 115px 46px 0 0;
content: "";
height: 0;
left: -45px;
position: absolute;
width: 0;
cursor: pointer;
top: 0;
}
#reservation-commande-content > ul > li div {
padding-left: 40px;
display: table-cell;
vertical-align: middle;
}
#reservation-commande-content > ul > li div.active {
background-color: #ee7f00;
height: 100%;
position: absolute;
width: 100%;
padding: 0;
display: none;
}
#reservation-commande-content > ul > li div.active:after {
border-color: #ee7f00 transparent transparent;
border-style: solid;
border-width: 115px 45px 0 0;
content: "";
cursor: pointer;
height: 0;
left: 280px;
position: absolute;
top: 0;
width: 0;
z-index: 2;
}
#reservation-commande-content > ul > li div.active p {
color: #1b1b1b;
font-family: "Arial";
font-size: 14px;
text-align: center;
text-transform: uppercase;
margin-top: 43px;
}
#reservation-commande-content > ul > li div.active p span {
clear: both;
color: #fff;
font-family: Arial Black, Arial;
font-weight: 900;
font-size: 15px;
position: relative;
float: left;
width: 100%;
}
#reservation-commande-content > ul > li#when div.active {
width: 229px;
}
#reservation-commande-content > ul > li#when div.active ul {
}
#reservation-commande-content > ul > li#when div.active ul li {
position: relative;
float: left;
list-style: none;
font-family: "Arial";
font-size: 14px;
color: #1b1b1b;
margin: 13px;
}
#reservation-commande-content > ul > li#when div.active::after, #reservation-commande-content > ul > li#how div.active::after {
left: 234px;
}
#reservation-commande-content > ul > li#when div.active::before, #reservation-commande-content > ul > li#how div.active::before {
border-color: transparent #ee7f00 transparent transparent;
border-style: solid;
border-width: 115px 45px 0 0;
content: "";
height: 0;
left: -45px;
position: absolute;
width: 0;
cursor: pointer;
top: 0;
}
#reservation-commande-content > ul > li#when div.active ul li:last-child {
margin-right: 0;
}
#reservation-commande-content > ul > li#when div.active ul li p {
margin-top: 30px;
}
#reservation-commande-content > ul > li#when div.active ul li span {
font-family: Arial Black, Arial;
font-weight: 900;
font-size: 15px;
color: #FFFFFF;
display: block;
margin: 0;
}
#reservation-commande-content > ul > li#when div {
padding-left: 5px;
}
#reservation-commande-content > ul > li#how div {
padding-left: 0;
}
#reservation-commande-content > ul > li div img {
float: left;
}
#reservation-commande-content > ul > li .title {
font-family: Arial Black, Arial;
font-weight: 900;
color: #101010;
text-transform: uppercase;
font-size: 14px;
padding-left: 73px;
}
#reservation-commande-content > ul > li .sub-title {
font-family: 'Arial';
color: #101010;
text-transform: uppercase;
font-size: 14px;
padding-left: 73px;
}
Voici le code HTML
<div class="container">
<div id="reservation-commande-content">
<ul>
<li id="where" class="after-triangle telecommande-item">
<div class="active">
<p>
Centre de <span></span> </p>
</div>
<div>
<img src="http://www.zoomjuridique.fr/wp-content/uploads/2016/03/referencement-e1459290192317.png" >
<p class="title">Augmenter votre visibilité</p>
<p class="sub-title"></p>
</div>
</li>
<li id="when" class="before-triangle after-triangle telecommande-item">
<div class="active">
<ul>
<li class="date-picker">
<p></p>
<span></span>
</li>
<li class="heure-picker">
<p></p>
<span></span>
</li>
<li class="duree-picker">
<p></p>
<span></span>
</li>
</ul>
</div>
<div>
<img src="http://www.zoomjuridique.fr/wp-content/uploads/2016/03/horloge_transparent.png">
<p class="title">Gagner du temps</p>
<p class="sub-title"></p>
</div>
</li>
<li id="how" class="before-triangle after-triangle telecommande-item">
<div class="active">
<p>
<span></span>
</p>
</div>
<div>
<img src="http://www.zoomjuridique.fr/wp-content/uploads/2016/03/euros_transparent-2.png" alt="home" width="50" height="50">
<p class="title">Augmenter votre clientèle</p>
<p class="sub-title"></p>
</div>
</li>
</li>
</ul>
</div>
</div>
<hr>
Sinon, vous pouvez aller directement sur mon site (en état de projet) : http://www.zoomjuridique.fr
Merci de votre aide.
Albert