- 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 6 années et 5 mois.
-
AuteurMessages
-
13 janvier 2016 à 14 h 05 min #558422
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.frProblè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.jpgEt 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 #1037580Hello,
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 #1037581Ligne 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 #1037582Et 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 #1037583En 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…
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.