Probleme largeur header blog wordpress theme Hemlock

Fermé

Eilimes Messages postés 1 Date d'inscription jeudi 23 mars 2017 Statut Membre Dernière intervention 23 mars 2017 - 23 mars 2017 à 12:15
ThomDSGN Messages postés 22 Date d'inscription mardi 14 avril 2015 Statut Membre Dernière intervention 18 mai 2017 - 18 mai 2017 à 16:17

Bonjour à toutes et à tous,

Je suis nouvelle ici et sur les forums d'ailleurs. Je n'y connais pas grand chose (et rien en code...), j'apprends en faisant sur mon blog. Un wordpress thème Hemlock : www.lesaventuresdenestor.com

J'ai souhaité mettre une grande photo plutot qu'un logo en header. J'ai donc suivi le tuto correspondant à mon theme :https://solopine.ticksy.com/article/3770/

Je travaille sur un grand écran. Quand je réduits la fenêtre ou ouvre le blog sur un autre ordinateur, le visuel ne s'ajuste pas et le combi situé au milieu de la photo qui devrait être au dessus de la colonne centrale de mon grid n'est plus centré. Une marge se crée à droite, et une barre de défilement en bas.

Sauriez-vous comment faire pour que cela s'ajuste en fonction des tailles d'écran ?
Pour le moment l'image en header fait 1524px de large (ils conseillent 1920 mais c'était pire...)
Merci d'avance !!

Pour info voilà en ce moment comment cela est configuré suite au tuto :
Custom CSS :

.sp-grid li { margin-right:auto; }
#logo img {max-width: 100%;}

a.more-link {font-weight: 100;}
.more-button {display: block; margin-bottom: 10px;}
And the php Header in WPide :

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title><?php wp_title('-', true, 'right'); ?></title>

<?php if(get_theme_mod('sp_favicon')) : ?>
<link rel="shortcut icon" href="<?php echo get_theme_mod('sp_favicon'); ?>" />
<?php endif; ?>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<nav id="navigation">

<div class="container">

<div id="navigation-wrapper">
<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'main-menu', 'menu_class' => 'menu' ) ); ?>
</div>

<div class="menu-mobile"></div>

<?php if(!get_theme_mod('sp_topbar_search_check')) : ?>
<div id="top-search">
<a href="#" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-search"></i></a>
</div>
<div class="show-search">
<?php get_search_form(); ?>
</div>
<?php endif; ?>

<?php if(!get_theme_mod('sp_topbar_social_check')) : ?>
<div id="top-social">

https://www.facebook.com/ echo get_theme_mod('sp_facebook'); ?>" target="_blank">
https://twitter.com/ echo get_theme_mod('sp_twitter'); ?>" target="_blank">
https://www.instagram.com/ echo get_theme_mod('sp_instagram'); ?>" target="_blank">
https://www.pinterest.com/ echo get_theme_mod('sp_pinterest'); ?>" target="_blank">
https://www.bloglovin.com/ echo get_theme_mod('sp_bloglovin'); ?>" target="_blank">
https://accounts.google.com/ServiceLogin?passive=1209600&osid=1&continue=https://plus.google.com/&followup=https://plus.google.com/ echo get_theme_mod('sp_google'); ?>" target="_blank">
<?php if(get_theme_mod('sp_tumblr')) : ?><a href="http://<?php echo get_theme_mod('sp_tumblr'); ?>.tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a><?php endif; ?>
https://www.youtube.com/ echo get_theme_mod('sp_youtube'); ?>" target="_blank">
<?php if(get_theme_mod('sp_rss')) : ?><a href="<?php echo get_theme_mod('sp_rss'); ?>" target="_blank"><i class="fa fa-rss"></i></a><?php endif; ?>

</div>
<?php endif; ?>

</div>

</nav>

<header id="header">

<?php if(!get_theme_mod('sp_logo')) : ?>

<?php if(is_front_page()) : ?>
<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
<?php else : ?>
<h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
<?php endif; ?>

<?php else : ?>

<?php if(is_front_page()) : ?>
<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>
<?php else : ?>
<h2><a href="<?php echo home_url(); ?>"><img src="<?php echo get_theme_mod('sp_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a></h2>
<?php endif; ?>

<?php endif; ?>
<div class="container">
</div>

</header>

A voir également:

Probleme largeur header blog wordpress theme Hemlock
Comment faire un blog - Guide
Telecharger wordpress - Télécharger - Blog & CMS
Theme sombre chrome - Guide
Thème iphone gratuit - Télécharger - Thèmes & Fonds d'écran
Gpt header corruption ✓ - Forum Windows 10

1 réponse

Réponse 1 / 1

ThomDSGN Messages postés 22 Date d'inscription mardi 14 avril 2015 Statut Membre Dernière intervention 18 mai 2017
18 mai 2017 à 16:17

Bonjour,
Si je comprend bien
Essaye quelque chose comme :

 #header img {  width: 100%;}

a la place de :

 #header img { max-width: 100%;}

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?

Image Subliminale dans une vidéo

dimensions TV 43 pouces

debloquer le code 400 bad request qui s'affiche à google

Ecran télé : diagonale / largeur / hauteur !

Discussions similaires

Newsletters