18041 sujets

Questions générales et questions de débutants

Problème sur un site responsive

Bonjour,

Je travail en local sous Prestashop (la dernière version) et il y a un problème qui se pose à différents endroits. En effet, j'ai ma loupe de recherche, mon image panier et deux logos sociaux qui se promènent dans tous les sens à chaque fois que je change la taille de ma fenêtre.


Voici un bout de mon code pour le blocksearch:

.srch-ico{
	  color:#000;
	  display:inline-block;
	  margin-left:70px;
	  padding:38px 0px 0px 300px;
	  width:45px;
	  height:45px;
	      content: '';
    display: block;
    clear: both;
	  cursor:pointer;
	  }
	  .srch-ico i{
	  font-size:26px;
	  }
	   @media (min-width: 800px) and (max-width: 1200px) {
	   .srch-ico{margin-left:70px; margin-right:none;
	   }
	   }
	     @media (min-width: 480px) and (max-width: 800px) {
		 .srch-ico{margin-left:100px;
		 padding:38px 0px 0px 280px;
		 display:inline-block;
		 }		 
		 }
		  @media (min-width: 320px) and (max-width: 480px) {
		 .srch-ico{width:100%; 
				border:0px solid #ebebeb; 
				color:#fff;
				background:#FC91A9;
				margin-top:20px; 
				margin-left:0px; 
				padding-top:7px;
				padding:9px 0px 0px 190px;
				}		
		  .srch-ico i:after{
				content:"\Search Products";	
				font-family:Roboto Slab, sans-serif; 
				font-weight:300;
				font-size:14px; 
				color:#fff; 
				padding-left:15px;}


A votre avis, comment je pourrais faire pour que cette fameuse loupe de recherche arrête de bouger et soit fixe? J'ai essayé de "bricoler" un peu mais je m'arrache les cheveux plus qu'autre chose.
Bonjour Lionel!

En fait il y avait l'accolade pour fermer juste là:

.srch-ico i:after{
				content:"\Search Products";	
				font-family:Roboto Slab, sans-serif; 
				font-weight:300;
				font-size:14px; 
				color:#fff; 
		  padding-left:15px;}
		  #search_block_top .btn.button-search {
				position:absolute;
				top:0;
				right:0;
			  }
		 }


Mais du coup je me pose des questions. L'ai-je placée au mauvais endroit?

(Désolée de ne pas avoir répondu plus tôt, j'ai coché la case pour avoir une notification par mail mais je n'ai rien reçu).
Modifié par astrid2776 (19 May 2016 - 08:31)
Sujet clos
Aller à