Réduire les espaces sur petit écran (smartphone) Twenty-twelve

Statut : non résolu

Ce sujet contient 4 réponses, 2 participants et a été mis à jour pour la dernière fois par LGphoto, le il y a 4 années et 8 mois.

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

Auteur

Messages
13 janvier 2016 à 14 h 05 min #558422
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

Et je voudrais réduire l’espace au dessus et au 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;
}

/*__________ Réduire espace au dessus de la barre de menu __________*/
.main-navigation {
	margin-top: 0;
}

/*__________ Fin Réduire espace au dessus de la barre de menu __________*/
/*__________ Réduire taille de la barre de menu petit écran__________*/
@media screen and (max-width: 960px) {
	.nav-menu a {
		font-size: 80%;
	}
}

/*__________ Fin Réduire taille de la barre de menu petit écran__________*/
}
```
Est-ce que quelqu’un peut m’aider ?
13 janvier 2016 à 14 h 10 min #1037580

Joss47
Modérateur

Maître WordPress
4727 contributions

Hello,

Ajoutes la ligne : margin-top: -37px; dans ton fichier css à la ligne 55.
Après tu n’as pas de css pour la version responsive, dommage.

C’est bien cela que tu souhaites?

13 janvier 2016 à 14 h 36 min #1037581
LGphoto
Membre

Padawan WordPress
78 contributions
Ligne 55, c’est bien ici ?
```
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {		
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	vertical-align: baseline;	
}
```
Je pense que ce n’est pas bon :
[img]www.lgphotography.fr/Help/Erro.jpg[/img]

[img]www.lgphotography.fr/Help/IMG_20160113_122246.jpg[/img]

Voilà sous photohop le résultat dont j’aimerais m’apporcher sur smartphone, sans toucher au site sur grand écran. (en fait, ça ne concerne que le moment où la barre de lien devient un bouton menu)
[img]www.lgphotography.fr/Help/Ex.jpg[/img]
au lieu de
[img]www.lgphotography.fr/Help/IMG_20151125_183219.jpg[/img]
13 janvier 2016 à 14 h 41 min #1037582

Joss47
Modérateur

Maître WordPress
4727 contributions

Et oui c’est ce que je disais, tu n’as pas de feuille de style dédiée à la version responsive de ton thème, du coup les changements affectent le site ordinateur également 😕

13 janvier 2016 à 14 h 48 min #1037583

LGphoto
Membre

Padawan WordPress
78 contributions

En fait, il y a des balises par taille d’écran, comme ” @media screen and (min-width: 960px) “, mais je ne trouve pas pour petit écran…
Auteur

Messages

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

Vous devez être connecté pour répondre à ce sujet.