Redimentionnement colonnes Product.tpl

[DevUB]

Bonjour,

 

je souhaite redimensionner les colonnes pb-center-column et pb-right-column : j'aimerais agrandir la zone centrale et décaler de ce fait, le bloc paiement à droite.

 

Le template de base :

 

 

ce que j'aimerais obtenir :

 

En utilisant des media queries (et je préviens, je n'y connais pas grand chose :/, mais je cherches !),J'ai réussis à agrandir un chouia, mais ça déconne (je les met en bas) et j'aimerais bien pouvoir avoir au moins 46 ou 48% pour pb-center-column.

 

En gros, ça marche sur grand écran, mais quand on réduit, c'est la cata, la colonne droite, passe dessous, puis remonte, puis repasse dessous... et j'ai besoin que mon site soit responsive

 

Voila pourquoi je fais appel à vous et à vos petits yeux neufs

j'ai surement oublié quelque chose quelque part hum..hum...

Oh et voici un lien pour tester en direct :  https://universbrico.com/traitements/1279-algimouss-bidon-30l.html

 

Merci !

 

 

Mon test media queries :

/*-Desktops and laptops-*/
@media only screen and (min-width : 1200px){
/* Styles pour cette Media Queries */
	.pb-center-column{
	width: 48%;
        border: 1px solid red !important;
	} 
}

/*-Smartphones (portrait and landscape)-*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles pour cette Media Queries */
	.pb-center-column{
	border: 1px solid green !important;
	width: 100%;
	} 
}

.pb-right-column{
	padding: 0px 5px !important;
	width:235px ;
	border: 1px solid yellow !important;
	} 

Edited August 16, 2017 by DevUB (see edit history)

[Baba deCode]

Bonjour,

 

Pour faire cela il faut connaitre et comprendre le système de grille de bootstrap (framework css que Prestashop utilise) ---> http://creersonsiteweb.net/page-bootstrap-grille

 

cordialement

Edited August 16, 2017 by Alexandre Carette (see edit history)

[DevUB]

Bonjour et merci pour ton lien. je sens que c'est pas le moment de te dire que j'ai moyennement comprit de quoi il en retournait? XD
En gros, j'ai l'impression que ce n'est pas faisable, et pourtant, ça doit l'être T.T

[Baba deCode]

Peut-être que tu comprendras mieux en video.... ca dure 9 min

 

 

+ 15m50 

 

Edited August 17, 2017 by Alexandre Carette (see edit history)

[DevUB]

Merci ! Je regarde ça quand j'ai deux secondes (Oui, je me bat avec prestashop qui à décidé de me faire tourner en bourrique avec des beugs en back-office XD T.T )

[DevUB]

Ok, là j'ai compris le coup du redimensionnement (et je me suis inscrite à la chaine ça me fera pas de mal!)

Du coup, là, pour obtenir ce que je veux, je dois rentrer dans mon css personnalisé :

 

.pb-center-column xs > mettre en 100%

.pb-right-column xs > mettre en 100%

.pb-center-column sm > mettre en 50%

.pb-right-column sm > mettre en 50%

.pb-center-column md > mettre en 60%

.pb-right-column md > mettre en 30%

.pb-center-column lg > mettre en 60%

.pb-right-column lg > mettre en 30%

 

C'est bien ça?

[Baba deCode]

pas du tout

 

.pb-center-column = une class css (native de prestashop)

 

.col-xs-1 = une autre class css (native de bootsrap)

 

<div class="pb-center-column"></div> ---> une div avec une classe nommée pb-center-column

 

 

<div class="pb-center-column col-xs-1"></div> ---> une div avec deux classes nommées pb-center-column et col-xs-1

 

quand on colle deux classes à un élément html (ici une div) on obtient une fusion des règles css de chacune des classes....

 

col-xs-1 vers col-xs-12 et col-md-1, col-lg-6 etc... sont des classes native de bootstrap qui servent a gérer les dimensions des colonnes pour le responsive

 

donc pour revenir a ton problème il suffit de changer la class de la bonne div

 

exemple: <div class="col-md-4"></div> pour "agrandir" on fait <div class="col-md-12"></div>

 

ps: un framework est fait pour gagner du temps, c'est un ensemble de code qui fait office de boite à outils

 

ps2: Avant de comprendre le framework Bootstrap il faut avoir les bases de HTML5 et CSS3

 

bon courage

Edited August 17, 2017 by Alexandre Carette (see edit history)

[DevUB]

Yaaa j'ai compris!

Désolé le jours de repos de hier à pas fait que du bien XD

 

Donc! j'ai modifié mes pb-left-column, pb-center, pb-right-column de façon à gérer les 12 carrés de la grille et hop! ça marche

 

En tout cas Merci beaucoup à toi !
 

[DevUB]

Bon, en fait, ça marche presque!

 

j'ia un petit soucis en 1200*600 : la colonne gauche passe sous la centrale, qui passe sous la droite.
Une idée?

[Baba deCode]

.box-info-product {
    width: 220px !important;
    float: right;
}

/themes/default-bootstrap/css/style_universbrico.css ligne 182

 

les tailles des blocs sont gérées en pourcentage par le framework bootstrap, donc pourquoi cette règle sur la classe box-info-product ?

 

cdt

Edited August 17, 2017 by Alexandre Carette (see edit history)

[DevUB]

Ah Tanks! j'avais tellement le nez dans le guidon que j'ai pas lever la tête et vérifier les anciens codes  ^^'

 

Merci !