28172 sujets

CSS et mise en forme, CSS3

Salut à tous! J'ai un souci par rapport à mon thème Wordpress Onetone, qui devrait être responsive mais non. Sur téléphone et tablette, le site ne s'affiche pas normalement alors que le code css devrait faire son effet. Je ne sais pas comment faire . Si vous avez une idée, merci beaucoup Smiley smile Voici le code css de la partie responsive si cela peut vous servir d'indication:

/* =Responsive-------------------------------------------------------------- *//* Maximum width of 600 pixels. */
@media screen and (max-width:600px) {
.full_width,.one_half,.one_third,.two_third,.one_fourth,.three_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth {
clear:both;
width:100%;
margin-left:0;
margin-right:0;
margin-bottom:1em;
}
.banner-box {
padding:5px 0;
}
.banner-scroll {
margin-top:10px;
margin-bottom:20px;
}
}

@media screen and (max-width:939px) {
.site-header {
background-color:#000;
top:0;
}
.site-main {
width:100%;
}
.main-content {
float:none;
width:100%;
margin-top:20px;
}
.sidebar {
width:100%;
overflow:visible;
padding-left:50px;
}
.widget-area {
margin-top:40px;
}
.widget {
font-size:16px;
}
.widget-title {
font-size:20px;
}
.searchform input#s {
height:29px;
}
#searchsubmit {
margin-top:2px;
}
.site-navigation {
margin-top:30px;
margin-right:30px;
}
.site-navigation a {
background-color:#000;
}
.post-entry {
margin-left:auto;
margin-right:auto;
}
.contact-area {
width:70%;
text-align:center;
overflow:hidden;
}

.banner-box {
padding:10px 0;
}
.banner-scroll {
margin-top:15px;
margin-bottom:10px;
}
}
@media screen and (max-width:719px) {
.site-main {
background-color:#000;
background-image:none;
}
.main-content {
padding-bottom:40px;
}
.site-navbar {
display:block;
}
.site-navigation {
display:none;
}
.post-entry {
width:520px;
}
.post-entry:hover {
background-color:transparent;
}
.entry-aside {
display:none;
}
.entry-date-sub {
display:inline;
margin-right:10px;
}
.entry-category {
display:none;
}
.entry-author {
display:none;
}
.paging-navigation {
margin-top:40px;
}
.portfolio-list {
width:100%;
}
.portfolio-list li {
width:100%;
margin-right:0;
}
.contact-area {
width:80%;
text-align:center;
overflow:hidden;
}
.banner-box {
padding:5px 0;
}
.banner-scroll {
margin-top:15px;
margin-bottom:10px;
}
.banner-box h1{
font-size:18px;
}
.banner-box span{
font-size:14px;
}
}
@media screen and (max-width:619px) {
.main-content {
padding-left:10px;
padding-right:10px;
}
.post-entry,.entry-main {
width:auto;
}
.post-entry img {
width:100%;
}
.site-footer {
height:auto;
width:auto;
overflow:hidden;
font-size:12px;
}
.contact-area {
width:100%;
text-align:center;
overflow:hidden;
}
}
Bonsoir. Pour aborder votre problème une page en ligne... ce serait mieux. Utilisez pour ce faire un site tel que Code Pen.
Modifié par Olivier C (28 Jan 2015 - 21:11)