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
    231 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
    13597 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
    231 contributions

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

    • Cette réponse a été modifiée le il y a 2 mois et 1 semaine par  zizanie.
    #1887357

    Flobogo
    Modérateur
    Maître WordPress
    13597 contributions

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

    #1888803

    zizanie
    Participant
    Chevalier WordPress
    231 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.