Discussion :

[dadou351]

Bonjour,

Je vous sollicite car je suis bloqué sur un léger problème avec mon site en responsive.

Je travaille avec Prestashop et j'ai donc modifié le codage du header pour ajouter le slogan.
Tout fonctionne bien en affichage normal (pc ou mac) mais dès que je souhaite un affichage pour une tablette ou un téléphone, je n'arrive pas à supprimer le fameux slogan, qui empiète sur la fonction recherche et le panier. Embêtant !

Voici le code que j'ai utilisé dans le fichier CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#header_slogan {			/* affichage du slogan en normal */
 
        text-align: center; 
        padding-top: 30px;
		padding-left: 300px;
		position: absolute;
		width:800px;
		z-index:-1;}
@media(max-width: 767px) {
    #header_slogan {			/* affichage du slogan en responsive */
 
	  display:none;} }

Dans le header j'ai ajouté le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="header_slogan">
<h3><img src="http://www.1art1design.com/img/guillemets1.png"/>{l s=' Treat yourself to the quality and authenticity of the creations made in France '}<img src="http://www.1art1design.com/img/guillemets1b.png"/></h3>

Voici le site en question ( en test ) : http://www.1art1design.com/boutique_test

Un grand merci par avance

David

[Sergejack]

Ben, ça marche votre solution.

Par contre vous ne tenez pas compte des DPI. https://developer.mozilla.org/fr/doc...CSS/resolution