Modifier rendu Twenty-twelve sur petit écran (smartphone)

Statut : non résolu

Ce sujet contient 1 réponse, 1 participant et a été mis à jour pour la dernière fois par LGphoto, le il y a 6 années et 5 mois.

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

Auteur

Messages
4 janvier 2016 à 13 h 29 min #557795
LGphoto
Membre

Padawan WordPress
78 contributions
Bonjour,

Ma configuration WP actuelle
– Version de WordPress : 4.4
– Version de PHP/MySQL : v5.5
– Thème utilisé : Thème enfant de Twenty Twelve
– Extensions en place :
AntiVirus
Foo Gallery
Jetpack by WordPress.com
MailPoet Newsletters
Master Slider
Media Library Assistant
Meta Slider
Page Builder by SiteOrigin
Responsive Add Ons
SiteOrigin Widgets Bundle
WP Lightbox 2

– Nom de l’hebergeur : OVH
– Adresse du site : http://www.lgphotography.fr

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

J’aimerais modifier le rendu de Twenty-twelve sur petit écran (téléphone mobile), mais je ne trouve pas à quelle partie du CSS je dois m’attaquer…

Vu que mon site est avant tout photo, je voudrais réduire l’espace occupé par le titre et le bouton de menu.

Je voudrais que la taille de police du titre s’adapte à la largeur de l’écran, pour qu’il reste sur une seule ligne, comme dans l’exemple ci-dessous (obtenu avec un autre thème, que j’ai dû changer car il posait pas mal de problèmes) :
http://www.lgphotography.fr/Help/IMG_20151125_183628.jpg
Alors qu’actuellement, j’ai ça sur smartphone :
http://www.lgphotography.fr/Help/IMG_20151125_183219.jpg

Je voudrais aussi maintenir la barre de lien (je n’aime pas beaucoup le bouton menu), mais toutes petite, comme sur l’exemple au dessus (sauf que sous le titre, comme sur mon site « grand écran) :
http://www.lgphotography.fr/Help/3Dcarousel2.jpg
Ou si ce n’est pas possible, au moins réduire l’espace au dessus et o dessous du bouton menu…

J’ai un déjà CSS modifié pour augmenter la largeur du thème et quelques autres personnalisations que j’ai faites, mais je n trouve pas comment faire ces modifs :
```
/*__________ Mint Cream Flavor child twentytwelve __________*/
.site-header,
footer[role= »contentinfo »] {
	background: white;
}

footer[role= »contentinfo »] {
	border: 0;
	padding-top: 48px;
}

body .site {
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.site-content article {
	margin-bottom: 24px;
}

.wrapper {
	margin-top: 12px;
}

.site-header hgroup, .site-header nav, .wrapper, footer[role= »contentinfo »] .site-info {
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 4px 0 0;
	}
	
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		border: 0;
	}
	
	.wrapper {
		margin-top: 2px;
	}
	
	body .site, footer[role= »contentinfo »] {
		max-width: 100%;
	}
	
	.site-header hgroup, .site-header nav, .wrapper, footer[role= »contentinfo »] .site-info {
		margin-left: auto;
		margin-right: auto;
		max-width: 920px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (min-width: 960px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role= »contentinfo »] .site-info {
		max-width: 940px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (min-width: 980px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role= »contentinfo »] .site-info {
		max-width: 960px;
	}
}

/*__________ end Mint Cream adjustments __________*/
/*__________ Couleur du menu deroulant (liens) __________*/
.main-navigation li ul li a {
	background: rgba(255,255,255,0.85) none repeat scroll 0 0;
	border-bottom: 1px solid #B6B6B6;
	display: block;
	font-size: .785714rem;
	line-height: 2.18182;
	padding: .571429rem .714286rem;
	width: 12.8571rem;
	white-space: normal;
}

/*__________ Fin Couleur du menu deroulant (liens) __________*/
a {
	outline: medium none;
	color: #636363;
}

/*__________ Taille champs Forulaire de contact Contact Form 7 __________*/
input[type= »textarea »], textarea {
	width: 100%;
}

/*__________ Fin Taille champs Forulaire de contact Contact Form 7 __________*/
.widget img, img.header-image, .author-avatar img, img.wp-post-image {
	box-shadow: none;
}
```
Est-ce que quelqu’un peut m’aider ?
4 janvier 2016 à 13 h 37 min #1034217

LGphoto
Membre

Padawan WordPress
78 contributions

Avec les balises image :

Le résultat dont j’amerais m’approcher, avec la barre de liens sous le titre et non à côté :

Le rendu actuel sur smartphone :

Le rendu actuel sur grand écran, que j’aimerais préserver sur écran plus petit :
Auteur

Messages