Difficulté à modifier la largeur du champ de recherche sous Prestashop 8.1.2 (Thème Classic)

[JoliBazar]

Bonjour,

Sous le thème "classic", j'essaie de modifier la largeur et le positionnement horizontal du champ de recherche de la page d'accueil, comme dans le  didacticiel vidéo n° 111 de webbax "Le meilleur template" insérée ci-dessous, aux minutes 10'11'' à 11'.

Utilisant Prestashop 8.1.2 au lieu de la version 1.7, les sélecteurs sont lègèrement différents.

Pour une raison inconnue, je ne parviens pas à redimensionner en  largeur l'élément <div id="search_widget">, qui pourtant se laisse encadrer en bleu et aligner sur la gauche. Sa largeur reste de 264px au lieu de 540px.

J'espérais que le sélecteur portant sur l'idenfifiant "search_widget", suffirait à terrasser tout autre règle basée sur la classe.
J'ai également essayé d'utiliser "width:540px!important", mais rien n'y fait.
C'est un peu comme si un autre élément venait caler la <div> et l'empéchaît de se déployer en largeur.

La page a bien entendu été actualisée par un "Ctrl + F5" et le cache de Prestashop est désactivé.

Qui peut m'aiguiller?
Merci

 

Voici les styles dans custom.css :

/* menu */
#_desktop_top_menu { display:none!important; }

/* tablette et desktop */
@media(min-width:768px) {

  #header .header-top div.header-top-right {text-align:left;border:2px solid magenta} 
  
  /* champ de recherche */
  #header .header-top div.header-top-right #search_widget {border:2px solid blue;display:block;float:left;width:540px;}
  #header .header-top div.header-top-right #search_widget form{background:yellow;}
  #header .header-top div.header-top-right #search_widget form input[type=text] {-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}

}

 

[Mediacom87]

Bonjour,

je viens de tester et en modifiant cette règle :

#search_widget {
	min-width: 80.5rem;
}

J'obtiens ce résultat.

Donc, je ne sais pas trop ce que vous avez fait et surtout, je ne regarde pas trop les tutos de webbax, même si j'aime bien Germain, j'ai dû trop souvent repasser sur des sites pour corriger les codes intégrer sans en maitriser réellement le sens.

[JoliBazar]

Merci, ça fonctionne en remplaçant la propriété width par la propriété min-width. 

Donc problème résolu, même si je ne capte toujours pas pourquoi la propriété "width" n'a ici pas fonctionné comme je l'espérais.

De mon côté, je survole les didacticiels de webbax, puis je les visionne à nouveau pas à pas, en créant mes propres sélecteurs et règles CSS.
Donc je m'en insipire et j'implémente à ma façon en comprenant ce que chaque étape implique.
Cela permet notamment de créer des sélecteurs plus précis (p. ex. sur identifiant au lieu de classe) afin d'éviter des "effets secondaires" surprises.

 

[Mediacom87]