Optimisation mobile?

[gouna]

Bonjour,

je suis tout nouveau ici, je suis en train de travailler sur mon site e-commerce via prestashop 1.6.1.2 depuis quelques jours.

Je pars du thème de base modifié via évolution x.

Bref cela se passe assez bien jusque là, sur pc, par contre sur mobile, aie aie aie...

Il faudrait idéalement déplacer la case Panier pour la mettre juste en dessous de la case Recherche, et remonter ensuite le menu pour éviter qu'il ne mange la partie de dessous (le sliders n'est là que pour test, je vais remplaçer çà par une bannière).

Et bien le problème est là : je n'arrive pas à modifier cette disposition "mobile".... 

Si quelqu'un à une solution, ou une autre idée, je suis preneur.

Merci beaucoup!

Edited July 9, 2018 by gouna (see edit history)

[Performance Agency]

Bonjour,

Quand tu inspectes ton code sur un écran de type mobile, tu peux voir les styles liés à ce format.

Les medias queries servent à attribuer des propriétés CSS pour des tailles d’écrans données ex:
@media (max-width: 767px) {
    div.tonmenu{
        padding:0;
        margin:0;
    }
}

Ceci appliquera padding 0 et margin 0 sur ta div ciblée pour les affichages inférieurs a 767px.

Il faut que tu gère ton style mobile avec ceci

[gouna]

Bonjour et merci beaucoup pour votre réponse, je vais essayer de régler tout çà. 

[gouna]

En lisant le code source directement sur la page web je me suis rendu compte qu'en l'état actuel des choses, le bloc "menu" affiché sur mobile correspond à ceci :

@media (max-width: 767px)
.cat-title {
    display: block;
    font: 600 18px/22px "Open Sans", sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 17px 20px;
    border-bottom: 3px solid #e9e9e9;
    background: #f6f6f6;
    position: relative;
}

et que le tout est hérité du fichier global.css ligne 5705.

 

Une fois dans ce fichier, entre les lignes 5701 et 5714 j'ai ce code :

@media only screen and (min-width: 1200px) {
  .container {
    padding-left: 0;
    padding-right: 0; } }
body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #777; }
  body.content_only {
    background: none;
    min-width: 0px;
  }

C'est ici que je suis perdu actuellement (dur l'apprentissage sur le tas ^^)

[Performance Agency]

Bonjour,

Le code suivant ne gère pas votre mobile, il encadre seulement du style pour la class container pour des tailles d'écrans de + de 1200px de large.

@media only screen and (min-width: 1200px) {
  .container {
    padding-left: 0;
    padding-right: 0; } }
body {
  min-width: 320px;
  height: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #777; }
  body.content_only {
    background: none;
    min-width: 0px;
  }

 

Vous pouvez simplement reprendre l'exemple de code suivant, en mettant a l'intérieur votre style destiné à votre partie mobile

@media (max-width: 767px) {
    div.tonmenu{
        padding:0;
        margin:0;
    }

    .autres_div{

        propriété : valeur;

    }
}

Ou alors modifié comme vous le disiez le code que vous inspectez depuis la console, en vérifiant bien que les médias queries correspondent à votre résolution.

Cordialement,

[gouna]

Ok merci je viens de trouver les fameuses lignes correspondantes à l'écart entre mes différents boutons.

Par exemple dans blockcart.css, le padding est à 50px.

Sur mobile j'aimerais avoir 0px, mais j'aimerais que ca reste à 50px sur autre écran.

concrètement, ou insérer le code type "@media (max-width: 767px)" dans le code source :

/*******************************************************************
					Cart Block Styles
********************************************************************/
#header .shopping_cart {
  position: relative;
  float: right;
  padding-top: 50px; }
  #header .shopping_cart > a:first-child:after {
    content: "\f0d7";
    font-family: "FontAwesome";
    display: inline-block;
    float: right;
    font-size: 18px;
    color: #FFFFFF;
    padding: 6px 0 0 0; }
  #header .shopping_cart > a:first-child:hover:after {
    content: "\f0d8";
    padding: 4px 0px 2px 0px; }

Merci encore et toujours

Edited July 11, 2018 by gouna
problème (see edit history)

[gouna]

up mise à jour de mon précédent message merci

[Performance Agency]

Vous pouvez le placer ou vous le souhaitez, il suffit de la placer après votre code définissant votre premier padding

Par exemple vous pouvez mettre :

/*******************************************************************
                    Cart Block Styles
********************************************************************/
#header .shopping_cart {
  position: relative;
  float: right;
  padding-top: 50px; }

@media (max-width: 767px) {

#header .shopping_cart {
  padding-top: 0px; }

}

  #header .shopping_cart > a:first-child:after {
    content: "\f0d7";
    font-family: "FontAwesome";
    display: inline-block;
    float: right;
    font-size: 18px;
    color: #FFFFFF;
    padding: 6px 0 0 0; }
  #header .shopping_cart > a:first-child:hover:after {
    content: "\f0d8";
    padding: 4px 0px 2px 0px; }

[gouna]

Ok merci beaucoup, il y avait un délai d'attente entre l'hébergement de mes fichiers modifié et la prise en compte de la modif en réel.

[gouna]

Dernière question et j'arrête de vous embêter (quoi que j'espère que tout ceci pourra servir à quelqu'un d'autre!); j'ai donc bien réussis à remonter mes bloc selon la taille de l'écran, par contre pour remonter mon menu sur écran mobile j'ai un petit soucis.

D'après mes recherches sur le code source, je dois modifier le fichier Index.php à la ligne 177 pour modifier mes marges du bloc menu... le problème c'est qu'une fois dans ce fichier index, j'ai l'impression qu'il est protégé :

"* 2007-2016 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately."
 

Voici ce que j'ai actuellement pour ma version mobile :

Voici ce que je voudrais faire (remonter le bloc menu et si possible réduire l'espace indiqué dans l'encadré jaune):

 

Merci encore par avance...

Edited July 11, 2018 by gouna (see edit history)

[gouna]

Bonjour, pour faire suite, ce qui me bloque pour modifier le padding c'est le module Evolution X. Si je le désactive alors mes marges sont bien prises en compte selon le type d'écran. Y a t-il un moyen de remédier à cela sans désactiver le module?

[Performance Agency]

Bonjour,

Il vous suffit de mettre vos propriétés en !important

Par exemple :

.votre_div{

padding: 0 !important;

}

[gouna]

Merci c'est parfait j'avais complètement oublié cette commande!