Problème affichage mobile

Créations de Thèmes

Hugo Membre non connecté

Booster Roquette

Le 08/04/2013 à 19h06

#127170

Bonjour,

J'ai créer un thème perso qui bug en affichage mobile: http://airsoft33.fr

screenshot_2013_04_08_19_02_15

On voit les images des news ainsi que le corps du site débordés sur le menu droit.

Le fond marron se coupe vers le bas au lieu de remplir toute la page...

Alors que l'affichage est parfait sur PC.

Voici mon design.css:

Code CSS :

/* --------------------------------------
        design.css
Contient les conteneur, fortement dépendant du design.
--------------------------------------*/ 
/* Corps du site 
--------------------------------------*/
* {
    margin:0;
    padding:0;
    font-size:100%;
}
 
body {
    background:url(images/body.jpg) no-repeat fixed top center;
    font-family:"Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
    font-size:14px;
    color:#333333;
    margin:0;
    padding:0;
}
 
html, body{ height: 100%; }
 
/* Conteneurs 
--------------------------------------*/
div#global {
    width:1024px;
    margin:auto;
}
 
div#header_container { }
 
div#logo {
    float: left;
    margin: 20px 20px 0px 35px;
    background: url('images/logo.gif') no-repeat;
    height: 90px;
    width: 90px;
}
 
div#site_name {
    font-size: 40px;
    font-family:"Trebuchet MS";
    color: #F9F9F9;
    position: absolute;
    top: 30px;
    margin-left: 150px;
}
div#site_description {
    font-size: 20px;
    font-family:"Trebuchet MS";
    color: #F9F9F9;
    position: absolute;
    top: 70px;
    margin-left: 150px;
}
 
div#header{ height:120px; }
 
div#item_sub_header a {
color:white;
font-size: 15px;
margin-left: 10px;
padding: 0px;
line-height: 45px;
}
 
div#item_sub_header img {
vertical-align:middle;
}
 
div#header .dynamic_menu h5.links {
    background:none;
    border:none;
    color:#edfff0;
    width:134px;
    background:url(images/button.png) no-repeat;
    padding:5px 0px;
    font-size:11px;
    margin-right:1px;
}
 
div#header .dynamic_menu h5.links:hover {
    color:#edfff0;
    cursor:default;
    background:url(images/button_click.png) no-repeat;
}
 
div#header .dynamic_menu h5 a {
    color:#FFFFFF;
    text-decoration:none;
}
 
div#compteur {
    color:#E9ECD9;
    position:absolute;
    top:50px;
    right:0;
    font-size:11px;
    margin-right:15px;
    text-align:right;
}
 
div#wrapper{
    background: #FAFAFA;
    width: 670px;
    overflow: hidden;
    margin:auto;
    border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
 
div#left_menu {
    float:left;
    width:200px;
    margin:0;
    margin-top:10px;
    margin-right:2px !important;
    margin-right:-1px;
    padding:0;
    text-align: center;
}
 
div#right_menu {
    float:right;
    width:300px;
    margin:0px 10px;
    padding:10px;
    background: #FFFFFF;
    border:1px solid #DFDFDF;
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
div#main {
    width:auto;
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    padding:0;
    margin:0;
}
 
div#main_content {
    width:auto;
    margin-top:5px;
    padding:5px 0px 20px 0px;
    border-spacing:1px;
    overflow: visible;
}
 
div#main_content img {
    max-width: 100%;
    height: auto;
}
 
div#links { text-indent:10px; margin-top: 8px;}
 
div#links a {
    color: #804000;
    font-weight: bold;    
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
div#top_contents { margin: 10px auto; }
div#bottom_contents { margin-top:8px; margin-bottom:8px; }
 
div#top_footer { 
    clear:both;
    padding: 10px;
    margin-top:50px;
}
 
div#top_footer{
    clear:both;
}
 
div#footer{
    clear:both;
    font-size:15px;
    background:#212121;
    border-top:5px solid #9bc816;
    margin-top:50px;
    min-width:1000px;
    overflow:hidden;
    color:white;
}
 
div#footer_columns_container{
    width:1000px;
    margin:10px auto;
}
 
div.footer_columns{
    float:left;
    width:229px;
    height:250px;
    padding:10px;
    border-right:1px solid #2a2a2a;
    text-align:center;
}
 
 
div.footer_columns_title{
    color:#E9E9E9;
    font-size:17px;
    border-bottom:1px solid #9bc816;
    margin:0px 10px 20px 10px;
    padding-bottom:5px;
    font-weight:bold;
}
 
div.footer_columns img{
    text-align:center;
    vertical-align:top;
}
 
div.footer_columns ul li{
    list-style:none;
}
 
div.footer_columns ul li a{
    text-align:left;
    padding-top:5px;
    color:#969595;
}
 
div.footer_columns ul li a:hover{
    color:#718396;
}
 
div.footer_columns ul li{
    text-align:left;
    padding-top:5px;
    margin-left:60px;
}
 
div.footer_columns_partners{
    padding-top:15px;
}
 
/* Content Spécifique */
 
ul.no_list{
    list-style:none;
    line-height: 1.7em;
}
 
 
div#sub_header { 
    height:47px;
    width:1010px;
    margin:10px auto;
    border:1px solid #000000;
    border-radius:5px;
    background:#333333;
    background:-moz-linear-gradient(top, #333333 0%, #222222 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222));
    background:-webkit-linear-gradient(top, #333333 0%,#222222 100%);
    background:-o-linear-gradient(top, #333333 0%,#222222 100%);
    background:-ms-linear-gradient(top, #333333 0%,#222222 100%);
    background:linear-gradient(top, #333333 0%,#222222 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 );
}
 
#sub_header li.first_level a, #sub_header li.first_level, #sub_header li.dynamic_menu span {
    color: #FFFFFF;
    font-size: 14px;
}
#sub_header li.first_level {
    padding: 0px !important;
}
#sub_header li.first_level > a, #sub_header li.dynamic_menu > span { 
    display:inline-block;
    height:17px;
    padding:10px 20px 10px 20px;
    text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
    border-right: 1px solid #000000;
}
#sub_header li.dynamic_menu, #sub_header li.dynamic_menu > span{
    transition-delay:0.8s;
    -o-transition-delay:0.8s;
    -ms-transition-delay:0.8s;
    -moz-transition-delay:0.8s;
    -webkit-transition-delay:0.8s;
}
#sub_header li.first_level:hover{ 
    background:#111111;
}
#sub_header li.dynamic_menu > span:hover, #sub_header li.dynamic_menu:hover > span, #sub_header li.dynamic_menu:hover{ 
    background:#3f3f3f !important; 
    border-color:#3f3f3f;
    transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -ms-transition-delay:0.2s;
    -moz-transition-delay:0.2s;
    -webkit-transition-delay:0.2s;
}
 
#sub_header li.first_level > a:after, #sub_header li.dynamic_menu > span:after{
    border-right: 1px solid #444444;
    bottom: 0px;
    content: "";
    position: absolute;
    right: -1px;
    top: 0px;
    z-index: 99;
}
#sub_header li.dynamic_menu > span:hover:after, #sub_header li.dynamic_menu:hover > span:after{
    border-right: 1px solid #222222;
}
 
#sub_header li img{
    margin:3px -10px 3px 6px  !important;
    max-height:34px;
    vertical-align:middle;
    display:inline-block;
    float:none !important;
}
 
#sub_header li.dynamic_menu > span:before{
    border-color: #FFFFFF transparent transparent;
    top: 18px;
}
#sub_header li.extend span:before{
    border-color: transparent #FFFFFF transparent;
    top: 10px;
}
#sub_header li.dynamic_menu span:before{
    border-image: none;
    border-right: 5px solid transparent;
    border-style: solid;
    border-width: 5px;
    content: "";
    position: absolute;
    right: 6px;
}
 
#sub_header li.dynamic_menu ul{
    background:#3f3f3f; 
    border-color:#3f3f3f;
    border-radius:0 0 5px 5px;
    padding:10px 0px 5px;
}
 
#sub_header li.dynamic_menu ul > li{
    background:none;
    border:none;
    width:200px;
    padding:0px;
    margin:0px;
}
 
#sub_header li.dynamic_menu ul > li:hover{
    background:none;
    width:200px;
    background:#333333;
    background:-moz-linear-gradient(top, #333333 0%, #222222 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222));
    background:-webkit-linear-gradient(top, #333333 0%,#222222 100%);
    background:-o-linear-gradient(top, #333333 0%,#222222 100%);
    background:-ms-linear-gradient(top, #333333 0%,#222222 100%);
    background:linear-gradient(top, #333333 0%,#222222 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 );
}
 
#sub_header li.dynamic_menu ul li a, #sub_header li.dynamic_menu ul li span {
    color: #FFFFFF;
    font-size: 12px;
    display:inline-block;
    border:none;
    padding:8px 10px;
    margin-left:5px;
}
 
#sub_header li.dynamic_menu ul li a:hover {
    background:none;
    border:none;
}
#reseaux_sociaux {
    float: right;
    margin: 20px 20px 0px 35px;
}