Rendre une page cms responsive

[anluce45]

Bonjour,

Je suis en version 1.6 prestashop.

Dans une page CMS, j'ai créé un tableau de 3 colonnes sur 2 lignes. Dans chacune des colonnes, j'y ai ajouté une image ainsi qu'un titre en dessous.

Mon souci est qu'en version mobile, ça n'est pas responsive.

Y a-t-il une ligne de code à ajouter à mon code HTML ?

Merci de votre aide.

Carole

 

 

[Eolia]

Dans votre tableau ajouter ces 2 classes:

<table class="table table-responsive">

...

Si votre thème les connait. normalement table a un max-width à 100%

[anluce45]

Bonjour et merci.

Je n'ai rien compris.

Je ne vois pas comment et ou ajouter ces 2 classes...

Si vous pouvez m'éclairer à ce sujet.

Merci.

Carole

[anluce45]

J'ai ajouté ce code à mon css :

@media screen and (max-width: 640px) {
	.cms-id-23 table, tbody, tr, td {
		display: block;
		width: auto!important;
	}
}

Afin d'appliquer ce css seulement à mon cms qui porte l'id 23, mais ça ne prend pas en compte ma condition, et donc tous mes tableaux du site sont impactés.

Ai-je fait une erreur dans la syntaxe ?

 

Edited February 20 by anluce45
add information (see edit history)

[Mediacom87]

Là votre règle s'applique aux éléments suivants :

• .cms-id-23 table
• tbody
• tr
• td

Donc oui, vous avez un souci de syntaxe.

https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content#sélectionner_plusieurs_éléments

Edited February 20 by Mediacom87 (see edit history)

[anluce45]

Merci pour votre réponse, j'ai pu corriger mon erreur. J'ai l'impression que .cms-id-23 ne fonctionne pas... et en effet l'id n'est pas déclarée dans la page html du cms. J'ai donc appliqué à toutes mes pages cms comme ceci et ça va très bien :

@media screen and (max-width: 640px) { 
	#cms table, #cms tbody, #cms tr, #cms td {
		display: block;
		width: auto!important;}
}

Bonne journée

[Divine]