Location Serveur dédié Les forums Evolution X – Générateur de thèmes Prestashop 1.6 [résolu] affichage colonne centrale en mode responsive

Ce sujet a 5 réponses, 2 participants et a été mis à jour par  Patrick, il y a 3 ans et 7 mois.

6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #35697

    Patrick
    Membre

    Bonjour Frédéric,

    Grâce à vos bons conseils, mon site est maintenant quasiment terminé (www.edujeux.fr/boutique).

    Je me heurte toutefois à un problème : le site est construit sur 2 colonnes (gauche et centrale) avec une colonne centrale occupant 74% de l’écran.
    Quand je passe en mode responsive @media (max-width:767px), les blocs de ma colonne gauche se retrouvent en haut de l’écran et sont suivis en dessous de la colonne centrale. Jusqu’ici tout est logique.
    Mais cette colonne centrale (col-sm-9) reste à 74% au lieu de passer à 100% ! Sur un smartphone où l’espace est compté, l’affichage ne couvre pas la totalité de la largeur de l’écran et c’est dommage.
    Avec Firebug, je peux bien sûr forcer le pourcentage mais comme il s’agit à chaque fois de fichiers compilés, impossible de faire une modif. définitive…

    Où diable se cache les instructions permettant d’obtenir une surface d’affichage optimale SVP ?

    Merci de me donner un petit coup de pouce !

    Cordialement.

    Patrick

    #35699

    Frédéric
    Admin bbPress

    Salut

    Je regarde ça dès que j’ai un moment.

    A tu essayer de la forcé a 100% avec du @media (max-width:767px),

    min-width: 767px

    ?? (je ne sais pas si ça marche, c’est juste une idée

    Professionnel du web depuis plus de 10 ans et Fondateur de la société DDLX Multimédia en 2007 - Les champs d'expertise de Frédéric sont : La création web | Web-Marketing & Communication |Wordpress | Woocommerce | Prestashop | Hébergement Web - Contact : TEL : 04 67 17 13 74 - Email : contact@ddlx.org

    #35700

    Patrick
    Membre

    Oui, j’ai essayé car je pense que c’est là que ça se joue mais sans succès… Mon code est sûrement erroné.
    Voici ce que j’ai ajouté dans le fichier ddlx_evolution.css :
    @media (max-width:767px){header .row #header_logo img{margin:0 auto;height:70px}
    header .row #header_logo{padding-bottom:15px}
    .col-sm-9{width:100%; }}

    #35733

    Patrick
    Membre

    Bonjour Frédéric,

    je relance le sujet abordé il y a 5 jours car il m’est impossible dorénavant d’y accéder (message : “vous devez être connecté pour répondre” – bien que je le sois).

    J’ai essayé comme tu me l’as conseillé l’instruction @media min-width / max-width dans différents fichiers css mais impossible d’obtenir un affichage à 100% sur smartphone et 75 % sur PC.

    As-tu eu le temps de regarder d’où pourrait provenir le problème ?

    Je te remercie par avance.

    Patrick

    #35740

    Frédéric
    Admin bbPress

    Bonjour

    Non pas eut le temps désolé,  rapidement peut être une astuce : ajoute la mention  “!important”   en fin de ligne des css celà peut forcer le code a être prioritaire.

    Professionnel du web depuis plus de 10 ans et Fondateur de la société DDLX Multimédia en 2007 - Les champs d'expertise de Frédéric sont : La création web | Web-Marketing & Communication |Wordpress | Woocommerce | Prestashop | Hébergement Web - Contact : TEL : 04 67 17 13 74 - Email : contact@ddlx.org

    #35743

    Patrick
    Membre

    Re-bonjour,

    Alors l’astuce du “!important”, c’est vraiment top pour se faire obéir par Prestashop… Je ne sais pas si c’est très académique au niveau du codage mais c’est efficace.
    Tout est rentré dans l’ordre et je te remercie une fois de plus.

    Bonne fin de journée.

    Patrick

6 sujets de 1 à 6 (sur un total de 6)

Vous devez être connecté pour répondre à ce sujet.