Modifier la largeur d’un site (Créer un compte)

  • Statut : non résolu
  • Ce sujet contient 8 réponses, 2 participants et a été mis à jour pour la dernière fois par lefevre, le il y a 8 années.
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #538678
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Bonjour,

    J’aimerais modifier la largeur de mon site, et ainsi désactiver son effet responsive qui fait que les images de mon menu personnalisé bien agencées se placent n’importe comment sur les écrans d’ordinateurs carré, smartphones, ou tout simplement lorsque l’on réduit la fenêtre du navigateur. Comment peut-on remédier à cela ? J’ai modifié quelques réglages dans ma feuille de style CSS… sans succès. Cela m’a pourtant l’air bien simple. Des idées ? Un plugin ferait-il l’affaire ?

    Ma configuration WP actuelle
    – Version de WordPress : 3.9.1
    – Version de PHP/MySQL : 5.1
    – Thème utilisé : Proxy responsive
    – Extensions en place :
    – Nom de l’hebergeur : OVH
    – Adresse du site :

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

    #956459
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Finissons par un remerciement, c’est plus accueillant : donc « MERCI pour votre aide » 🙂

    #956460
    Sebastien013
    Membre
    Chevalier WordPress
    171 contributions

    Salut,

    ton thème est payant non?

    Si c’est le cas, il me faudrait l’URL de ton site pour t’aider :rolleyes:

    #956461
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Coucou, oui mon thème est payant. Je ne peux malheureusement pas donner son URL car cela dévoile l’idée générale du site, et les murs ont des oreilles, une personne a déjà tenté de me voler mon idée. Mais je peux montrer des images du menu.
    Avant réduction de la fenêtre Google Chrome : image
    Après réduction… image2

    Une solution ?

    #956462
    Sebastien013
    Membre
    Chevalier WordPress
    171 contributions

    Pourrais tu au moins mettre le contenu du fichier Css de ton site alors? car sans savoir ce qu’il a dedans , c’est relativement compliqué de te donner une solution….

    Essaye avec un « min-width » sinon.

    #956463
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Of course !

    /*!
    Theme Name: Proxy
    Theme URI: http://codestag.com/themes/proxy
    Description: A single page WordPress theme for creative teams. Responsive and Retina Display Ready.
    Author: Codestag
    Author URI: http://codestag.com
    Version: 1.2.3
    Textdomain: stag
    Tags: light, blue, flexible-width, theme-options, custom-colors, editor-style, translation-ready, high resolutions, hidpi, retina, fluid, responsive, one-page
    License: GNU General Public License v2.0
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */
    /*! $CSS Reset & Clearfix */
    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: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }
    
    html {
      line-height: 1;
    }
    
    ol, ul {
      list-style: none;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    caption, th, td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }
    
    q, blockquote {
      quotes: none;
    }
    q:before, q:after, blockquote:before, blockquote:after {
      content: «  »;
      content: none;
    }
    
    a img {
      border: none;
    }
    
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
      display: block;
    }
    
    .inner-content {
      max-width: 1210px;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0 auto;
    }
    
    ::selection {
      background: #1c93c5;
      color: #fff;
      text-shadow: none;
    }
    
    .clearfix {
      *zoom: 1;
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix:after, .clearfix:before {
      content:  » « ;
      display: table;
    }
    
    .clear {
      clear: both;
      display: block;
      font-size: 0;
      height: 0;
      line-height: 0;
      width: 100%;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding: 0;
      font-weight: normal;
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
    }
    
    h1 {
      font-size: 40px;
      line-height: 1;
      margin: 0 0 10px 0;
    }
    
    h2 {
      font-size: 35px;
      margin: 0 0 10px 0;
    }
    
    h3 {
      font-size: 30px;
      margin: 0 0 0.5em 0;
    }
    
    h4 {
      font-size: 28px;
      margin: 0 0 5px 0;
    }
    
    h5 {
      font-size: 26px;
      margin: 0 0 5px 0;
    }
    
    h6 {
      font-size: 24px;
      margin: 0 0 5px 0;
    }
    
    p {
      margin: 0 0 1em 0px;
    }
    
    .button,
    button,
    input[type=submit] {
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      padding: 13px 37px 13px;
      line-height: 1;
      background: #1c93c5;
      text-transform: uppercase;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
    .button:hover,
    button:hover,
    input[type=submit]:hover {
      background: #187ca6;
      color: #fff;
    }
    
    input[type= »password »] {
      margin: 15px 0;
    }
    
    input[type= »text »],
    input[type= »email »],
    input[type= »number »],
    input[type= »password »],
    textarea {
      background: #f8f8f8;
      width: 100%;
      padding: 15px 20px;
      font-size: 14px;
      border: 1px solid #e5e5e5;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
    }
    input[type= »text »]:focus,
    input[type= »email »]:focus,
    input[type= »number »]:focus,
    input[type= »password »]:focus,
    textarea:focus {
      border-color: #a3a3a3;
      outline: 0;
    }
    input[type= »text »]::-webkit-input-placeholder,
    input[type= »email »]::-webkit-input-placeholder,
    input[type= »number »]::-webkit-input-placeholder,
    input[type= »password »]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #76787c;
      font-weight: bold;
      text-transform: uppercase;
    }
    input[type= »text »]::-moz-placeholder,
    input[type= »email »]::-moz-placeholder,
    input[type= »number »]::-moz-placeholder,
    input[type= »password »]::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #76787c;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    em {
      font-style: italic;
      font-size: 14px;
    }
    
    .pull-left {
      float: left;
    }
    
    .pull-right {
      float: right;
    }
    
    .grids {
      width: auto;
      max-width: 1190px;
      margin: 0 0 0 -1.7%;
      list-style: none;
      overflow: hidden;
    }
    
    .grids [class*= »grid-« ] {
      display: inline-block;
      margin: 0 0 0 1.5%;
      vertical-align: top;
    }
    
    .grid-1 {
      width: 6.15%;
    }
    
    .grid-2 {
      width: 14.583%;
    }
    
    .grid-3 {
      width: 22.917%;
    }
    
    .grid-4, .grid-one-third {
      width: 31.25%;
    }
    
    .grid-5 {
      width: 39.583%;
    }
    
    .grid-6, .grid-half {
      width: 47.917%;
    }
    
    .grid-7 {
      width: 56.25%;
    }
    
    .grid-8, .grid-two-thirds {
      width: 64.583%;
    }
    
    .grid-9 {
      width: 72.917%;
    }
    
    .grid-10 {
      width: 81.25%;
    }
    
    .grid-11 {
      width: 89.583%;
    }
    
    .grid-12 {
      width: 97.917%;
      margin: 0;
    }
    
    @media screen and (max-width: 700px) {
      .grids {
        margin: 0;
        width: auto;
      }
    
      .grids [class*= »grid-« ] {
        display: block;
        width: auto;
        margin: 0 0 40px 0;
      }
    }
    /*! $Document Setup (body, common classes, vertical rhythm, structure etc) */
    *,
    *:after,
    *:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    table {
      width: 100%;
      margin: 30px 0;
    }
    
    ul, ol, dl {
      margin-left: 30px;
    }
    
    dd {
      margin-bottom: 30px;
    }
    
    strong {
      font-weight: bold;
    }
    
    img {
      max-width: 100%;
      height: auto;
    }
    
    html {
      text-rendering: optimizeLegibility;
      width: 100%;
      overflow-x: hidden;
    }
    html.gateway-open {
      margin-top: 0 !important;
    }
    html.gateway-open #wpadminbar {
      display: none;
    }
    
    i,
    em {
      font-style: italic;
    }
    
    a {
      color: #1c93c5;
      text-decoration: none;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
    }
    a:hover {
      color: #1f2329;
    }
    
    input {
      -ms-word-break: normal;
      word-break: normal;
      padding: 5px;
      min-width: 200px;
      max-width: 100%;
    }
    
    input[type= »text »],
    input[type= »email »],
    input[type= »url »] {
      -webkit-appearance: none;
    }
    
    input, button, select, textarea {
      font-family: inherit;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
    }
    
    blockquote {
      background: #1c93c5;
      color: #fff;
      font-family: « Droid Serif », Georgia, serif;
      font-size: 28px;
      padding: 25px 0px 25px 20px;
      margin: 1em 0;
      position: relative;
      padding-left: 130px;
      margin-left: -115px;
      line-height: 1.4;
      position: relative;
    }
    blockquote p {
      margin: 0 0 0px 0 !important;
      line-height: 1.4;
    }
    blockquote:after {
      content:  »;
      width: 115px;
      height: 100%;
      position: absolute;
      background: black;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.2);
      background-image: url(assets/img/icon-blockquote.png);
      background-repeat: no-repeat;
      background-position: center center;
    }
    
    abbr[title], acronym[title], dfn[title] {
      cursor: help;
      border-bottom: 1px dotted #666;
    }
    
    sub {
      font-size: 12px;
      vertical-align: bottom;
    }
    
    sup {
      font-size: 12px;
      vertical-align: top;
    }
    
    .alignright {
      float: right;
      margin: 10px 0px 10px 10px;
    }
    
    .alignleft {
      float: left;
      margin: 10px 10px 10px 0px;
    }
    
    .aligncenter {
      text-align: center;
    }
    
    #backToTop {
      background: #69b4e1 url(assets/img/top-arrow.png) no-repeat center center;
      display: inline-block;
      padding-top: 20px;
      margin-left: 20px;
      width: 60px;
      height: 60px;
      line-height: 1;
      text-align: center;
      vertical-align: middle;
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
    }
    
    body {
      font: 18px/1.4 « Droid Sans », Arial, sans-serif;
      word-wrap: break-word;
      word-break: break-word;
      color: #8d8f92;
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body.gateway-open {
      position: fixed;
      overflow: hidden;
      min-width: 100%;
    }
    
    /*! $Header Styles */
    #header {
      background: #FFFFFF;
      padding: 20px 0;
      color: #fff;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 10001;
      height: auto;
    }
    #header a {
      color: #fff;
    }
    .admin-bar #header {
      top: 28px;
    }
    .admin-bar.mp6 #header {
      top: 32px;
    }
    
    #logo {
      font-size: 40px;
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
      text-transform: uppercase;
      font-weight: bold;
      line-height: 1;
      float: left;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
    }
    
    .header-inner, .inner-section {
      max-width: 1210px;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0 auto;
      position: relative;
    }
    
    /*! $Navigation & Menus */
    #primary-nav {
      margin-top: 16px;
    }
    #primary-nav > ul {
      float: right;
    }
    #primary-nav ul {
      margin: 0;
      padding: 0;
    }
    #primary-nav ul ul {
      z-index: 1000;
      position: absolute;
      background: #1c93c5;
      top: 46px;
      overflow: visible !important;
      -webkit-border-radius: 0 3px 3px 3px;
      -moz-border-radius: 0 3px 3px 3px;
      -ms-border-radius: 0 3px 3px 3px;
      -o-border-radius: 0 3px 3px 3px;
      border-radius: 0 3px 3px 3px;
    }
    #primary-nav ul ul ul {
      top: 0;
    }
    #primary-nav ul ul a:hover {
      color: #1f2329;
    }
    #primary-nav ul ul li {
      margin: 0;
    }
    #primary-nav li {
      display: inline-block;
      line-height: 1;
      margin-left: 10px;
      position: relative;
    }
    #primary-nav li.sfHover > a, #primary-nav li.current-menu-item > a, #primary-nav li.active > a {
      background: #1c93c5;
    }
    #primary-nav li a {
      display: block;
      padding: 15px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
    }
    #primary-nav li a:hover {
      background: #1c93c5;
    }
    
    .gateway-open #container {
      opacity: 0;
    }
    
    #container {
      padding-top: 119px;
    }
    
    #mobile-primary-nav, .nocomments {
      display: none;
    }
    
    /*! $SECTION BLOCKS  */
    .section-block {
      padding: 80px 0;
    }
    .section-block .sub-title {
      margin: 0 0 15px 0;
      font-size: 13px;
      text-transform: uppercase;
      font-weight: bold;
    }
    .section-block .main-title {
      font-size: 55px;
      line-height: 1;
      color: #474a4f;
    }
    .section-block .entry-content {
      margin-top: 50px;
    }
    
    .content-section .sub-title,
    #about .sub-title,
    #contact .sub-title,
    #team .sub-title {
      color: #1c93c5;
    }
    .content-section .main-title,
    #about .main-title,
    #contact .main-title,
    #team .main-title {
      color: #474a4f;
    }
    
    #services {
      background: url(assets/img/map.png) no-repeat center center #494158;
      color: #fff;
    }
    #services a:hover {
      color: inherit;
    }
    #services .main-title {
      color: #fff;
    }
    #services .grids {
      margin-top: 50px;
    }
    #services .grid-3 {
      text-align: center;
    }
    #services .service-title {
      font-size: 18px;
      margin: 20px 0px;
      color: #fff;
    }
    #services figure {
      width: 136px;
      height: 147px;
      background: url(assets/img/bg-service-box.png) no-repeat transparent center center;
      margin: 0 auto;
    }
    #services figure.no-bg {
      background-image: none !important;
    }
    #services figure .custom-icon {
      width: 100%;
      height: 100%;
      text-align: center;
    }
    #services figure .inner-bg {
      background-image: url(assets/img/sprite-service-box.png);
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      background-position: 38px 35px;
    }
    #services figure .inner-bg.mobile {
      background-position: -262px 35px;
    }
    #services figure .inner-bg.user-experience {
      background-position: -562px 35px;
    }
    #services figure .inner-bg.branding {
      background-position: -862px 35px;
    }
    
    #work, #blog, .work-section {
      background: #1f2329;
      color: #fff;
    }
    #work .main-title, #blog .main-title, .work-section .main-title {
      color: #fff;
    }
    #work a, #blog a, .work-section a {
      color: #fff;
    }
    #work a:hover, #blog a:hover, .work-section a:hover {
      color: #fff;
    }
    
    #blog .pubdate {
      font-size: 13px;
      text-transform: uppercase;
      color: #FFFFFF;
      font-weight: bold;
      margin: 0;
    }
    #blog .grids {
      margin-top: 50px;
      overflow: visible;
    }
    #blog .entry-content img {
      float: left;
      margin-right: 30px;
    }
    #blog .featured-post h2 {
      font-size: 40px;
    }
    #blog .all-posts {
      background: #1c1f25;
      background: rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    #blog .all-posts a {
      color: #fff;
    }
    #blog .all-posts a:hover {
      opacity: 0.6;
    }
    #blog .all-posts h3 {
      font-size: 20px;
      margin: 0;
    }
    #blog .all-posts .row {
      margin-top: 40px;
    }
    #blog .all-posts .row:first-child {
      margin-top: 0;
    }
    
    #blog-post-slider {
      background: none;
      position: relative;
    }
    #blog-post-slider .flex-direction-nav {
      position: absolute;
      right: 0px;
      top: -100px;
      width: 110px;
    }
    #blog-post-slider .flex-next {
      right: -20px;
    }
    
    #contact iframe {
      width: 100%;
      margin: 70px 0;
    }
    #contact .sub-heading {
      font-size: 40px;
      color: #474a4f;
      line-height: 1;
      margin-bottom: 80px;
    }
    #contact address {
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-size: 16px;
    }
    #contact address p {
      margin: 10px 0;
      line-height: 35px;
    }
    #contact address p.map .icon {
      background-position: 0px 0px;
    }
    #contact address p.email .icon {
      background-position: 0px -45px;
    }
    #contact address p .icon {
      display: inline-block;
      background: url(assets/img/sprite-contact.png) no-repeat;
      width: 34px;
      height: 35px;
      vertical-align: top;
      margin-right: 10px;
    }
    #contact .description {
      margin-top: 30px;
    }
    #contact button {
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
    }
    #contact .row {
      margin-bottom: 30px;
    }
    #contact textarea {
      resize: none;
      height: 160px;
    }
    #contact .error {
      color: #cc0000;
      font-size: 14px;
    }
    #contact .thanks {
      color: #579b0c;
    }
    
    #team .team-members {
      margin-top: 50px;
      margin-left: -25px;
      text-transform: uppercase;
    }
    #team .team-members .member {
      width: 270px;
      display: inline-block;
      vertical-align: top;
      margin: 0 0px 30px 25px;
    }
    #team .team-members .member:hover a.linkedin {
      right: 63px;
    }
    #team .team-members .member:hover a.twitter {
      left: 63px;
    }
    #team .member-pic {
      position: relative;
      overflow: hidden;
    }
    #team .member-pic img {
      width: 100%;
    }
    #team .member-pic .member-links {
      text-align: center;
      position: absolute;
      width: 100%;
      bottom: 60px;
      height: 65px;
    }
    #team .member-pic .member-links a {
      width: 67px;
      height: 65px;
      display: inline-block;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      opacity: .9;
      background-image: url(assets/img/icon-member-social.png);
      background-color: #1c93c5;
      background-repeat: no-repeat;
      position: absolute;
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
      top: 0;
    }
    #team .member-pic .member-links a.twitter {
      background-position: 18px center;
      left: -200px;
    }
    #team .member-pic .member-links a.linkedin {
      background-position: -59px center;
      right: -200px;
    }
    #team .member-pic .member-links a:first-child {
      margin-right: 5px;
    }
    #team .member-description {
      background: #1f2329;
      margin-top: -6px;
      font-size: 15px;
      padding: 10px;
    }
    .gecko #team .member-description {
      margin-top: -7px;
    }
    #team .member-description p {
      margin: 0;
      line-height: 1;
    }
    #team .member-description .member-title {
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
      color: #fff;
      margin-bottom: 10px;
    }
    #team .member-description .member-position {
      font-size: 13px;
      font-weight: bold;
    }
    
    #other .widget-title {
      font-size: 30px;
      color: #474a4f;
    }
    #other .widget {
      margin-bottom: 40px;
    }
    #other ul {
      list-style: disc;
      margin: 0 0 0 40px;
    }
    #other li {
      margin: 5px 0;
    }
    
    /*! $Slider Styles */
    #slideshow {
      overflow: hidden;
      max-width: 100%;
    }
    #slideshow img {
      width: 100%;
    }
    #slideshow .slider-content {
      position: absolute;
      top: 30%;
      left: 0;
      z-index: 100;
      width: 100%;
      display: block;
      height: auto;
      color: #fff;
      text-align: center;
    }
    #slideshow .slider-content .slider-content-inner {
      max-width: 90%;
      margin: 0 auto;
    }
    #slideshow .slider-content h2 {
      background: #1f2329;
      background: rgba(31, 35, 41, 0.9);
      font-size: 65px;
      display: inline-block;
      padding: 15px 25px 15px;
      line-height: 1;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      margin-bottom: 20px;
      color: #fff;
    }
    #slideshow .slider-content h3 {
      background: #1c93c5;
      background: rgba(28, 147, 197, 0.9);
      font-size: 30px;
      display: inline-block;
      padding: 10px 25px 10px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      line-height: 1;
      color: #fff;
    }
    #slideshow .slides li {
      float: left;
      position: relative;
      width: 100%;
    }
    #slideshow .flex-control-nav.flex-control-paging {
      position: absolute;
      display: block;
      bottom: 50px;
      margin: 0 auto;
    }
    #slideshow .flex-control-paging li a {
      width: 11px;
      height: 11px;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      -ms-border-radius: 40px;
      -o-border-radius: 40px;
      border-radius: 40px;
      border: 2px solid #fff;
      background: transparent;
    }
    #slideshow .flex-control-paging li a.flex-active {
      background: #fff;
    }
    #slideshow a {
      color: #fff;
    }
    #slideshow h3 a {
      display: block;
    }
    
    .flexslider {
      margin: 0;
    }
    
    /*! Portfolio Slider */
    #portfolio-slider {
      margin-top: 50px;
      background: none;
      position: relative;
    }
    #portfolio-slider ul li {
      position: relative;
      margin-bottom: 20px;
    }
    #portfolio-slider ul li:hover a[data-through= »gateway »] {
      opacity: 1;
    }
    #portfolio-slider a[data-through= »gateway »] {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 10;
      text-align: center;
      padding-top: 30%;
      overflow: hidden;
      top: 0px;
      left: 0px;
      opacity: 0;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #portfolio-slider a[data-through= »gateway »] h3 {
      background: #1f2329;
      letter-spacing: 1px;
      max-width: 80%;
      font-size: 20px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
      border-radius: 2px;
      padding: 20px 20px;
      color: #fff;
      line-height: 1;
      display: inline-block;
      margin-top: 0;
    }
    #portfolio-slider a[data-through= »gateway »] .icon-open {
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      -o-border-radius: 2px;
      border-radius: 2px;
      background: url(assets/img/icon-plus.png) no-repeat center center #1c93c5;
      display: inline-block;
      vertical-align: top;
      width: 65px;
      height: 60px;
      margin-left: 10px;
    }
    #portfolio-slider a[data-through= »gateway »] .icon-open:before {
      content: none;
    }
    
    #portfolio-single-slider {
      position: relative;
      max-height: none;
    }
    #portfolio-single-slider .flex-control-paging {
      position: absolute;
      bottom: 60px;
      z-index: 1000;
    }
    #portfolio-single-slider .flex-control-paging li a {
      width: 11px;
      height: 11px;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      -ms-border-radius: 40px;
      -o-border-radius: 40px;
      border-radius: 40px;
      border: 2px solid #fff;
      background: transparent;
    }
    #portfolio-single-slider .flex-control-paging li a.flex-active {
      background: #fff;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: #474a4f;
    }
    
    /*! $Post Content Styles  */
    h3#pings {
      margin: 20px 0;
    }
    
    .hentry {
      max-width: 1200px;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0 auto;
      padding-bottom: 50px;
    }
    #blog .hentry {
      padding: 0;
      margin: 0;
    }
    #blog .hentry .pubdate {
      padding: 0;
    }
    #blog .hentry.sticky h2 a {
      color: red !important;
    }
    .hentry .entry-title {
      font-size: 55px;
    }
    .hentry h1, .hentry h2, .hentry h3, .hentry h4, .hentry h5, .hentry h6 {
      color: #FFFFFF;
    }
    .hentry .pubdate {
      font-size: 13px;
      color: #FFFFFF;
      font-weight: bold;
      padding-top: 80px;
      text-transform: uppercase;
    }
    .hentry .entry-content {
      line-height: 1.6;
    }
    
    .page .hfeed, .single .hfeed {
      min-height: 550px;
    }
    .hfeed .entry-image {
      text-align: center;
    }
    .hfeed .entry-image img {
      width: 100%;
    }
    
    .entry-content ul, .comment-body ul {
      list-style: disc;
      margin: 10px 0px 10px 40px;
    }
    .entry-content ol, .comment-body ol {
      list-style: decimal;
      margin: 10px 0px 10px 40px;
    }
    
    .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
      color: #474A4F;
      margin: 1em 0;
      line-height: 1.2;
    }
    .entry-content p {
      margin: 1em 0;
    }
    
    .intro-text {
      font-size: 23px;
      color: #474a4f;
    }
    
    /*! $Footer Styles */
    .footer {
      background: #69b4e1;
      padding: 40px 0;
      color: #fff;
    }
    .footer a:hover {
      color: #fff;
    }
    .footer .copyright {
      text-align: right;
    }
    .footer .social-links {
      margin-top: 10px;
    }
    .footer .social-links li {
      float: left;
      margin-right: 20px;
    }
    .footer .social-links a {
      display: inline-block;
      width: 40px;
      height: 40px;
      background: url(assets/img/sprite-social.png) no-repeat;
    }
    .footer .social-links a.facebook {
      background-position: -200px -3px;
    }
    .footer .social-links a.twitter {
      background-position: -129px 0px;
      width: 48px;
    }
    .footer .social-links a.dribbble {
      background-position: 0px 0px;
    }
    .footer .social-links a.forrst {
      background-position: -66px 0px;
    }
    .footer .social-links a.feed {
      background-position: -265px 0px;
    }
    .footer .social-links a:hover {
      opacity: 0.4;
    }
    
    :target {
      -webkit-transition: all 0.25s;
      -moz-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
    }
    
    #gateway-wrapper {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0;
      background: #fff;
      z-index: 10003;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
      display: none;
    }
    #gateway-wrapper .close-gateway {
      background-color: #191c21;
      background-position: -202px center;
    }
    #gateway-wrapper .close-gateway:hover {
      background-color: #121518;
    }
    
    @media (min-width: 769px) {
      #gateway-wrapper .hentry {
        min-height: 700px;
      }
    }
    #gateway-navigation-2 {
      overflow: hidden;
    }
    
    #gateway-navigation, #gateway-navigation-2 {
      background: #1f2329;
      height: 120px;
      text-align: right;
    }
    #gateway-navigation a, #gateway-navigation-2 a {
      background: url(assets/img/bg-gateway-navigation.png) no-repeat;
      display: inline-block;
      cursor: pointer;
      width: 120px;
      height: 100%;
    }
    #gateway-navigation a.next, #gateway-navigation-2 a.next {
      background-position: -62px center;
    }
    #gateway-navigation a.next:hover, #gateway-navigation-2 a.next:hover {
      opacity: 0.4;
    }
    #gateway-navigation a.prev, #gateway-navigation-2 a.prev {
      background-position: 50px center;
    }
    #gateway-navigation a.prev:hover, #gateway-navigation-2 a.prev:hover {
      opacity: 0.4;
    }
    
    /*! $Comments */
    #respond-wrap {
      padding: 80px 0 40px 0;
    }
    #respond-wrap #respond {
      max-width: 1210px;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0 auto;
    }
    #respond-wrap h3 {
      color: #474a4f;
      font-size: 55px;
    }
    #respond-wrap textarea {
      resize: none;
      height: 300px;
    }
    #respond-wrap input[type=text] {
      width: 570px;
    }
    #respond-wrap .comment-reply-link {
      display: inline-block;
    }
    #respond-wrap label {
      width: 100px;
      display: inline-block;
      margin-left: 20px;
      padding-top: 11px;
    }
    #respond-wrap form input[type=text] {
      float: left;
    }
    #respond-wrap form p {
      overflow: hidden;
      *zoom: 1;
    }
    #respond-wrap .required {
      color: #EA4848;
    }
    
    #comment-wrap {
      padding: 50px 0px;
      background: #f8f8f8;
    }
    #comment-wrap .comment-reply-link {
      display: inline-block;
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
      background: #f0f0f0;
      padding: 9px 35px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      float: right;
      color: #c9c9c9;
      font-size: 16px;
    }
    #comment-wrap .comment-reply-link:hover {
      background: #ededed;
    }
    #comment-wrap h3#comments {
      color: #474a4f;
      font-size: 55px;
      display: inline-block;
      margin: 0;
    }
    #comment-wrap .comments-header .button {
      float: right;
      margin-top: 30px;
    }
    
    .commentlist {
      margin-top: 50px;
    }
    .commentlist .avatar {
      width: 100px;
      float: left;
    }
    .commentlist .inner-body {
      padding-left: 120px;
    }
    .commentlist .inner-body #respond-wrap {
      padding-top: 0px;
    }
    .commentlist .inner-body #respond-wrap h3 {
      font-size: 30px;
    }
    .commentlist .inner-body #respond-wrap textarea {
      height: 200px;
    }
    .commentlist .comment-author {
      color: #474a4f;
      font-size: 18px;
    }
    .commentlist li.comment {
      border-top: 1px solid #dfdfdf;
      padding-top: 40px;
      margin-top: 40px;
    }
    .commentlist li.comment:first-child {
      margin-top: 0;
      padding-top: 0;
      border: none;
    }
    .commentlist .children {
      margin-left: 10%;
    }
    .commentlist .children li:first-child {
      border-top: 1px solid #dfdfdf;
      padding-top: 40px;
      margin-top: 40px;
    }
    .commentlist .comment-date {
      font-size: 13px;
      color: #76787c;
      text-transform: uppercase;
      font-weight: bold;
    }
    
    .portfolio-details {
      font-family: « Novecentowide-Bold », Helvetica, sans-serif;
      font-weight: normal;
      position: relative;
      z-index: 10000;
      border: 1px solid #dfdfdf;
      width: 470px;
      max-width: 100%;
      display: inline-block;
      float: right;
      margin: 0 0 20px 20px;
      color: #919191;
    }
    .portfolio-details .row {
      padding: 20px;
      border-top: 1px solid #dfdfdf;
      padding-top: 20px;
    }
    .portfolio-details .row:first-child {
      border: none;
    }
    .portfolio-details .button {
      width: 420px;
      max-width: 100%;
      display: inline-block;
      text-align: center;
      padding: 22px 0;
    }
    .portfolio-details .icon-check {
      width: 29px;
      height: 29px;
      margin-right: 10px;
      display: inline-block;
      background: url(assets/img/icon-check.png) no-repeat;
      vertical-align: top;
    }
    .portfolio-details .icon-check:before {
      content: none;
    }
    .portfolio-details span {
      color: #474a4f;
    }
    
    #cancel-comment-reply-link {
      display: none;
    }
    
    @media only screen and (max-width: 1280px) {
      #slideshow .slider-content h2 {
        font-size: 50px;
      }
      #slideshow .slider-content h3 {
        font-size: 25px;
      }
    
      #slideshow .slider-content {
        top: 25%;
      }
    }
    /*————————————————————————*/
    /*  Tiny Screens and up
    /*————————————————————————*/
    @media (min-width: 993px) {
      #mobile-nav {
        display: none;
      }
    }
    @media only screen and (max-width: 992px) {
      #primary-nav > ul {
        display: none;
      }
    
      #logo {
        display: inline-block;
        float: none;
      }
    
      #mobile-nav {
        font-size: 25px;
        border-bottom: none;
        cursor: pointer;
        display: inline-block;
        margin-top: 25px;
        float: right;
      }
    
      #primary-nav {
        margin-top: 0;
      }
    
      #mobile-nav {
        position: absolute;
        top: 25px;
        right: 30px;
        margin-top: 0;
      }
    
      #mobile-primary-nav {
        width: 100%;
      }
      #mobile-primary-nav ul {
        margin-left: 0;
      }
      #mobile-primary-nav li {
        display: block;
        margin: 2px 0;
      }
      #mobile-primary-nav li a {
        display: block;
        padding: 8px 15px;
      }
      #mobile-primary-nav li a:hover {
        background: #1c93c5;
      }
      #mobile-primary-nav .sub-menu {
        margin-left: 20px;
      }
    }
    /* 768 ============================================= */
    @media only screen and (max-width: 768px) {
      #portfolio-slider {
        margin-top: 100px;
      }
    
      #blog .featured-post {
        margin-bottom: 70px;
      }
    
      .footer .copyright {
        display: block;
        text-align: left;
        padding: 50px 0px 0 0;
        width: 100%;
      }
      .footer .copyright #backToTop {
        float: right;
        margin-right: 20px;
        position: relative;
        margin-top: -20px;
      }
    
      #slideshow .slider-content h2 {
        font-size: 25px;
        padding-top: 10px;
      }
      #slideshow .slider-content h3 {
        font-size: 20px;
      }
    
      #slideshow .flex-control-nav.flex-control-paging {
        bottom: 10px;
      }
    
      #blog .entry-content img {
        display: none;
      }
    
      .portfolio-details {
        display: block;
        margin: 0 0 30px 0;
        width: 100%;
      }
    
      #gateway-wrapper article.portfolio .entry-title {
        position: relative;
        top: -20px;
      }
    
      #gateway-navigation,
      #gateway-navigation-2 {
        height: 90px;
      }
      #gateway-navigation a,
      #gateway-navigation-2 a {
        width: 100px;
      }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      #team .team-members .member {
        width: 46%;
      }
    }
    @media only screen and (max-device-width: 1024px) {
      #portfolio-slider .flex-direction-nav {
        display: none;
      }
    }
    @media only screen and (max-width: 1024px) {
      #header {
        position: static;
      }
    
      #container {
        padding-top: 0 !important;
      }
    
      #portfolio-slider .portfolio-content .icon-open {
        display: none;
      }
    }
    /* Smartphones (portrait and landscape) ———– */
    /* 640 ============================================= */
    @media only screen and (max-width: 640px) {
      body {
        font-size: 16px;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        transition: all 0.25s;
      }
    
      .main-title,
      #comment-wrap h3#comments,
      .hentry .entry-title {
        font-size: 40px !important;
        line-height: 1;
      }
    
      #contact .sub-heading {
        font-size: 30px;
      }
    
      #header {
        position: static;
      }
    
      #container {
        padding-top: 0 !important;
      }
    
      .commentlist .children {
        margin-left: .5%;
      }
    
      blockquote {
        font-size: 22px;
      }
    
      #comment-wrap .comments-header .button {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
      }
    
      #blog .entry-content img {
        display: none;
      }
    }
    @media only screen and (max-width: 480px) {
      #portfolio-slider .portfolio-content {
        padding-top: 25%;
      }
    
      .commentlist .avatar {
        display: none;
      }
    
      .commentlist .inner-body {
        padding-left: 0;
      }
    
      .stag-alert .icon,
      blockquote:after {
        width: 80px;
      }
    
      blockquote, .stag-alert {
        padding-left: 95px;
      }
    
      blockquote blockquote {
        padding-left: 10px;
      }
    
      #blog .featured-post h2 {
        line-height: 1;
        font-size: 30px;
      }
    
      .footer .copyright span {
        display: inline-block;
        max-width: 60%;
      }
    
      #portfolio-slider a[data-through= »gateway »] {
        padding-top: 0;
      }
    
      #portfolio-slider a[data-through= »gateway »] .icon-open {
        display: none;
      }
    }
    @media only screen and (max-width: 550px) {
      #portfolio-slider .icon-open {
        display: none;
      }
    }
    @media only screen and (max-width: 750px) {
      #respond-wrap form label {
        margin-left: 0;
        margin-bottom: 5px;
      }
    
      #respond-wrap form p {
        margin: 0 0 10px 0;
      }
    
      #respond-wrap form textarea {
        margin-top: 15px;
      }
    }
    @media only screen and (max-width: 420px) {
      #slideshow .slider-content h2 {
        margin-bottom: 10px;
        font-size: 18px !important;
      }
    
      #slideshow .slider-content h3 {
        font-size: 13px;
      }
    
      .flex-control-nav {
        display: none !important;
      }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      #services figure {
        background: url(assets/img/bg-service-box@2x.png) no-repeat transparent center center;
        background-size: 136px 147px;
      }
      #services figure .inner-bg {
        background-image: url(assets/img/sprite-service-box@2x.png) !important;
        background-size: 966px 75px;
      }
    
      #contact address p .icon {
        background-image: url(assets/img/sprite-contact@2x.png);
        background-size: 32px 75px;
      }
    
      #backToTop {
        background-image: url(assets/img/top-arrow@2x.png);
        background-size: 19px 12px;
      }
    
      .footer .social-links a {
        background-image: url(assets/img/sprite-social@2x.png);
        background-size: 303px 43px;
      }
    
      #gateway-navigation a {
        background-image: url(assets/img/bg-gateway-navigation@2x.png);
        background-size: 273px 33px;
      }
    
      .stag-toggle span.ui-icon,
      .stag-toggle .ui-state-active .ui-icon {
        background-image: url(assets/img/bg-toggle@2x.png);
        background-size: 20px 71px;
      }
    
      .stag-alert:before {
        background-image: url(assets/img/icon-alert@2x.png);
        background-size: 39px 135px;
      }
    
      .portfolio-details .icon-check {
        background-image: url(assets/img/icon-check@2x.png);
        background-size: 29px 29px;
      }
    
      #team .member-pic .member-links a {
        background-image: url(assets/img/icon-member-social@2x.png);
        background-size: 107px 29px;
      }
    
      blockquote:after {
        background-image: url(assets/img/icon-blockquote@2x.png);
        background-size: 45px 45px;
      }
    
      #portfolio-slider .portfolio-content .icon-open {
        background-image: url(assets/img/icon-plus@2x.png);
        background-size: 26px 26px;
      }
    }
    @media (max-width: 1300px) {
      .stag-alert {
        margin-left: 0;
      }
    
      blockquote {
        margin-left: 0;
      }
    }
    h1.incoming-gateway, .loader {
      font-size: 35px;
      text-align: center;
      font-weight: bold;
      margin-top: 120px;
      color: #1f2329;
    }
    
    .sticky, .bypostauthor {
      color: #888a8d;
    }
    
    .gallery-caption {
      background: #e9e9e9;
      padding: 10px;
    }
    
    .gallery-icon {
      text-align: left;
    }
    .gallery-icon a {
      display: block;
      line-height: 1;
    }
    .gallery-icon img {
      border: none !important;
    }
    
    .wp-caption-text.gallery-caption {
      position: relative;
      top: -3px;
      font-size: 14px;
    }
    
    #gallery-1 .gallery-item {
      width: 30.5% !important;
    }
    
    .archive-lists li {
      margin-bottom: 5px;
      list-style: disc;
    }
    .archive-lists h3 {
      margin: 30px 0;
    }
    
    .stag-twitter-feeds {
      margin-top: 50px;
    }
    .stag-twitter-feeds ul {
      padding: 0;
      margin: 0;
    }
    .stag-twitter-feeds li {
      margin-bottom: 20px;
    }
    .stag-twitter-feeds .time {
      font-size: 14px;
      margin-top: 5px;
    }
    
    #flickr_badge_wrapper {
      margin-top: 50px;
    }
    
    .flickr_badge_image {
      display: inline-block;
      vertical-align: top;
      margin: 0 5px 5px 0;
      -webkit-transition: opacity 0.3s;
      -moz-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
    }
    .flickr_badge_image:hover {
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
      opacity: 0.5;
    }
    
    .stag-toggle .stag-toggle-content {
      padding: 20px 0;
    }

    #956464
    Sebastien013
    Membre
    Chevalier WordPress
    171 contributions

    ok, alors selon moi,

    tu as deux possibilités, ou tu conserves le côté responsive, mais tu ajoutes des min-width où c’est nécessaire, pour que ton contenu ne soit pas obligé de se déformer,

    ou tu enlèves les dimensions en pourcentages et tu les remplaces par des valeurs en pixel.

    Malheureusement, je ne pense pas pouvoir t’aider plus, même avec le CSS , je ne sais pas à quoi correspond chaque chose :(

    Bon courage 🙂

    #956465
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    J’ai remplacé tous les max-width par min-width sans succès. De même pour les valeurs en pixel.
    Je ne suis pas novice concernant WordPress, mais dès qu’il faut toucher du code, je suis un peu perdu, peut-être parce que je ne m’y suis jamais intéressé. Bref, bloqué. Merci pour ton aide en tout cas, et si quelqu’un a une petite idée, elle sera la bienvenue !

    #956466
    lefevre
    Membre
    Chevalier WordPress
    255 contributions

    Voici la solution !

    body {
        text-align: center;
      }
      #container {
        text-align: left;
        margin-right: auto;
        margin-left: auto;
        width: 1250px;
      }

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