Bloc non responsive : comment faire ?

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 :

/************
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

Pour info, j'utilise le WP version 4.4.2

Personne pour m'aider ????

ce qui fout la pagaille, c'est cette ligne :

@media (min-width: 768px)
.container {
     width: 750px; 
}

Merci. J'ai supprimé la ligne et le problème persiste.

Sinon, avez vous une solution qui me permettrait de faire trois blocs distincts pour rentrer des arguments comme j'ai essayé de faire.

Merci encore de votre aide

Albert

Pour un CMS, je n'ai pas de solution. Pour du "fait main" j'ai bootstrap

Et en passant, je vois encore la ligne

@media (min-width: 768px)
.container {
    width: 750px;
}

dans bootstrap.min.css... Il faut apprendre à faire "clic droit -> inspecter l’élément" car c'est une mine d'or!

Merci.

Bonjour Albert,

Est-il vraiment utile de laisser, en responsive, ces 3 blocs qui fonctionnent mal (copie d'écran 1), alors que quelques pixels plus bas, on retrouve ces 3 même blocs en rectangle qui cette fois fonctionnent très bien en responsive (copie d'ecran 2).

Sur mon ecran, je recois ca :





Ne serait il pas preferable d'enlever les 3 premiers blocs, en responsive (du genre "display: none;") ?

Merci pour ta réponse.

Effectivement comme je n'avais pas de solutions à mon problème, j'ai pris l'initiative de partir de zéro et de créer trois blocs en sachant qu'ils seront moins originaux que les précédents.

Ton idée de mettre "display: none" me plaît bien. Où mettons nous ce bout de code ?

Merci de ton aide

Je ne connais pas WordPress. Je ne peux malheureusement pas te répondre.

Il faut que tu ailles dans le fichier CSS où il y a la partie "responsive".
A priori, ca devrait etre le fichier nommé "/wp-content/themes/thbusiness/style.css?ver=4.4.2".
En fin de fichier "ca commence par @".

Tu devras indiquer le conteneur et faire quelque chose du genre :

#conteneur {
display: none;}

Bonne chance.
Modifié par alain_47 (07 Apr 2016 - 02:15)