Header responsive

  • WordPress :4.7
  • Statut : non résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #1885817
    zizanie
    Participant
    Chevalier WordPress
    272 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.1
    • Thème utilisé : Levii
    • Extensions en place : Askimet, loomup, simple lightbox gallery
    • Nom de l’hébergeur : 1&1
    • Adresse du site : ecosse.mbartoli.fr (uniquement dans la barre d’adresses google)

    Problème(s) rencontré(s) :

    Je n’arrive pas à rendre responsive pour mon téléphone portable mon image du header.

    Dans le code header php j’ai ceci

    Dans le css levii thème enfant ceci

    Impossible de réduire l’image, elle “déborde”

    Peut-être n’ai-je pas non plus ciblé la bonne div

     

    Un peu d’aide me serait utile

     

    Merci

    @media (max-width: 480px){
    .site-header-cover-image
    	 {
    		height: 150px;
    width: 100%.
    max-width: 100%;
    	}
    }

    <meta name="viewport" content="width=device-width, initial-scale=1">

    #1886951
    Flobogo
    Modérateur
    Maître WordPress
    15866 contributions

    Bonjour,

    Basez-vous sur les lignes 824 et suivantes et 1776 et suivantes du thème-parent : l’image est correctement responsive à ce niveau. En ajoutant background-size: cover; ça devrait aussi améliorer

    #1886989
    zizanie
    Participant
    Chevalier WordPress
    272 contributions

    Je vais voir cela mais dois-je enlever le width 100% ET LE remplacer par le cover. Merci

    #1887357
    Flobogo
    Modérateur
    Maître WordPress
    15866 contributions

    Non, ce n’est pas la même propriété.

    #1888803
    zizanie
    Participant
    Chevalier WordPress
    272 contributions

    Bonjour

     

    J’essaie depuis hier soir, impossible. Voilà mon code :

    @media screen and (max-width: 320px) {
    	
    	.site-header-cover-image,
    	.no-site-header-img .site-header-cover-image {
    		height: 150px;
    background-size: cover;
    
    width: 100%;
    	}
    }

5 sujets de 1 à 5 (sur un total de 5)
  • Vous devez être connecté pour répondre à ce sujet.