Réduire les espaces sur petit écran (smartphone) Twenty-twelve (Créer un compte)

Accueil › Forums › WordPress › Réduire les espaces sur petit écran (smartphone) Twenty-twelve
  • Statut : non résolu
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
    4834 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
    4834 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.