Guten Tag,
ich stehe auf dem schlauch. Es geht um eine Veränderung in der style.css. Es geht darum, dass ich auf meiner Webseite in der Desktop-View 3 column habe im Produktebereich. Im Tablet-View habe ich 2 column. Auf dem Smartphone 1 column. Kann mir jemand die unten stehende style.css so verändern, dass ich ebenfalls in der Smartphone Sicht eine 2 column view habe?
Vielen Dank
Ich teile den Code, da nur max. 3000 Wörter erlaubt sind :)
/* --------------------------------------------------------------
17.0 Columns
-------------------------------------------------------------- /
.column {
font-size: 15px;
display: inline-block;
position: relative;
float: left;
width: 30.6%;
margin-right: 4%;
margin-bottom: 4%;
overflow: hidden;
vertical-align: top;
box-shadow: 0 2px 0 #D9E1E7;
border-radius: 3px;
background: #fff;
}
.column:nth-child(3n) {
margin-right: 0;
}
@media only screen and (max-width: 960px) {
.column {
width: 47%;
}
.column:nth-child(3n) {
margin-right: 4%;
}
.column:nth-child(2n) {
margin-right: 0;
}
}
@media only screen and (max-width: 600px) {
.column {
width: 100%;
margin-right: 0;
margin-bottom: 8%;
}
}
.widget-section .column {
padding: 6% 4%;
}
/* Only one widget /
.widget-section .column:first-child:nth-last-child(1) {
width: 50%;
float: none;
display: block;
margin: 0 auto 6% auto;
}
@media only screen and (max-width: 768px) {
.widget-section .column:first-child:nth-last-child(1) {
width: 100%;
}
}
/* Only two widgets /
.widget-section .column:first-child:nth-last-child(2),
.widget-section .column:first-child:nth-last-child(2) ~ .column {
width: 48%;
}
@media only screen and (max-width: 600px) {
.widget-section .column:first-child:nth-last-child(2),
.widget-section .column:first-child:nth-last-child(2) ~ .column {
width: 100%;
}
}
/* Only three widgets /
.widget-section .column:first-child:nth-last-child(3),
.widget-section .column:first-child:nth-last-child(3) ~ .column {
width: 30%;
}
@media only screen and (max-width: 960px) {
.widget-section .column:first-child:nth-last-child(3),
.widget-section .column:first-child:nth-last-child(3) ~ .column {
width: 30%;
margin-right: 3%;
}
}
@media only screen and (max-width: 768px) {
.widget-section .column:first-child:nth-last-child(3),
.widget-section .column:first-child:nth-last-child(3) ~ .column {
width: 100%;
}
}
.widget-section .column:first-child:nth-last-child(2) ~ .column:last-child,
.widget-section .column:first-child:nth-last-child(3) ~ .column:last-child {
margin-right: 0;
}