1485 sujets

Web Mobile et responsive web design

[Résolu] Porblème responsive theme wordpress

Bonjour,
Je travaille sur un site depuis un moment, j'ai épluché forums, tuto et cours pour trouver une solution à mon problème.

Voilà j'ai un thème censé être responsive mais j'ai un gros souci avec l'image d'en-tête chargée : elle ne s'adapte pas aux écran tablettes et smartphone. J'ai lus un cours responsive sur OpenClassroom sur le responsive mais ça n'arrange rien.

Voici à peu près les codes responsives pour mon theme :

/* =Responsive Design
------------------------------------------------- */
@media screen and (max-width: 800px) {
	#content article {
		width: 30.6%;
	}
	#content article:nth-child(3n+3) {
		margin-right: 0 !important;
	}
	#content article:nth-child(4n+4) {
		margin-right: 4%;
	}
	
}

@media screen and (max-width: 600px) {
	header#masthead {
		height: 550px !important;
	}
	
	.main-navigation a {
		padding: 20px 10px 16px;
	}
	#content article {
		width: 48%;
	}
	#content article:nth-child(3n+3) {
		margin-right: 4% !important;
	}
	#content article:nth-child(4n+4) {
		margin-right: 4%;
	}
	#content article:nth-child(2n+2) {
		margin-right: 0 !important;
	}
	hgroup h1.site-title {
		font-size: 3em;
		text-shadow: 3px 3px 0 rgba(0,0,0,0.5);
	}
	hgroup h2.site-description {
		font-size: 100%;
	}
	.single .entry-header {
		width: 100%;
		margin-left: 0;
		float: none;
		text-align: center;
	}
	.entry-meta-wrap {
		display: block;
	    float: none;
	    margin: 0 0 3em;
	    text-align: center;
	    width: 100%;
	}
	.single-content-wrap {
		width: 100%;
		float: none;
		display: block;
	}
	.single #nav-below {
		width: 100%;
	}
	#respond {
		max-width: 100%;
	}
	.widget-area, aside {
		width: 100%;
		float: none;
		display: block;
	}
}


Merci d'avance pour votre aide Smiley sweatdrop
Bonjour,

Le code css c'est très bien mais il faudrait le html. En effet, celui qui consulte votre message va se poser à juste titre cette question : de quoi est composé votre header ? Autrement dit dans quel élément parent l'image de l'entête est-elle englobée ?

De plus on n'a que le code des modifications responsives mais pas le css de base de l'entête qui peut très bien être responsive par défaut...

Bref, rien ne vaut un bon test en ligne genre CodePen.
Merci de ta réponse Oliver C, hum étant donné qu'il s'agit d'un thème wordpress et donc en php je colle le code html de la page php du header (header.php)

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<?php do_action( 'before' ); ?>
	<?php $header_image = get_header_image(); ?>

	<header id="masthead" class="site-header" role="banner" <?php if ( ! empty( $header_image ) ) { ?>style="background:url(<?php header_image(); ?>) no-repeat center center; background-size: cover; height:<?php echo get_custom_header()->height; ?>px;" <?php } ?>>
		<hgroup>
			<div class="site-text">
				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
				<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
			</div>
		</hgroup>
	</header><!-- #masthead .site-header -->
	

	<div id="main" class="site-main">
		<nav id="anchor" role="navigation" class="site-navigation main-navigation">
			<h1 class="assistive-text"><?php _e( 'Menu', 'snaps' ); ?></h1>
			<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'snaps' ); ?>"><?php _e( 'Skip to content', 'snaps' ); ?></a></div>

			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

	</nav>


Le hic c'est que j'ai l'impression que puisqu'il s'agit d'un theme wordpress et donc d'un site avec plusieurs page php j'ai l'impréssion que si je fais les modifications dans une page il faut que je le fasse dans d'autres aussi, non ?

Ou est-ce que le css est la seule source de possibilité de modification du mode responsive ?
SiriusSirius a écrit :
Merci de ta réponse Oliver C, hum étant donné qu'il s'agit d'un thème wordpress et donc en php je colle le code html de la page php du header (header.php)

Euuuh... avec du code déjà interprété ce serait tout de même plus simple.

SiriusSirius a écrit :
Le hic c'est que j'ai l'impression que puisqu'il s'agit d'un theme wordpress et donc d'un site avec plusieurs page php j'ai l'impression que si je fais les modifications dans une page il faut que je le fasse dans d'autres aussi, non ?
Ou est-ce que le css est la seule source de possibilité de modification du mode responsive ?

Tout dépend de la manière dont est codé le thème du côté php. Mais si toutes les pages sont identiques dans leur rendu html final - code dupliqué ou non côté serveur - vous ne pouvez toucher qu'au CSS.

Pour en revenir au code l'élément incriminé n'est pas une image mais un élément <header> sur lequel est appliqué un background-image (vous voyez que j'ai bien fait de poser la question). Il faut donc agir sur cet élément, ou sur son id ("masthead") ou sur sa classe ("site-header"). Mettez l'un ou l'autre avec un max-width à 100% déjà, pour voir.

PS : au passage, la balise html <hgroup>, présente dans le code, a été retirée des spécifications html5, même si elle est supportée par la plupart des navigateurs récents.
Déjà merci beaucoup Olivier C d'avoir pris la peine de me répondre (c'est de plus en plus rare sur les forum, on sent les essoufflements de répondre aux même problèmes à chaque fois Smiley rolleyes )

J'ai réglé le problème ! En faite je crois que j'ai rencontré deux possibles problèmes : 1/ Je crois que je regardais les changements effectués sur mon site en ligne au lieu de regarder en local 2/ J'en doute assez fort car je pense que du coup c'était plutôt mon hébergeur local (WAMP) qui ralentissait de malade...il ne faisait pas directement les changements quand je rafraîchissais la page.

Bref au final j'ai juste fais ceci pour régler mon souci et ça fonctionne impecc' :

@media screen and (max-width: 600px) {
	header#masthead {
		height: 50px !important;
		padding-bottom: 50px;
		padding-top: 20px;
		margin-bottom: 20px;
	}


Voilà voilà, je le met en résolu, merci encore Olivier C Smiley biggrin
Sujet clos
Aller à