Modifier rendu Twenty-twelve sur petit écran (smartphone) (Créer un compte)

  • Statut : non résolu
2 sujets de 1 à 2 (sur un total de 2)
  • Auteur
    Messages
  • #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 ?

    #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é :
    IMG_20151125_183628.jpg

    Le rendu actuel sur smartphone :
    IMG_20151125_183219.jpg

    Le rendu actuel sur grand écran, que j’aimerais préserver sur écran plus petit :
    3Dcarousel2.jpg

2 sujets de 1 à 2 (sur un total de 2)
  • Vous devez être connecté pour répondre à ce sujet.