Have just been playing around with some of the css already supplied with the Simplicity template (2.5) and have created a 2 column class which was a copy of the 'gktestimonials' class in gk.stuff.css as seen below.
My 2 column setup shows correctly in a webrowser, however it does not show correctly when viewed on a mobile device. The 3 column setup enables the displaying of the 3 divs of info to show vertically when in mobile views. However my 2 column setup keeps it all horitontal and squishes the 2 columns to fit.
Can anyone please point out my mistake or if I also need to fix an additional bit of css into another css file.
Example of current use: (at top under "The Technology") http://dev1.zidanc.com/index.php/cupron-r
Thanks
Daniel
- Code: Select all
/* 3 columns */
.gkTestimonials {
margin: 30px -50px 0 -50px;
}
.gkTestimonials > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
padding: 0 50px;
width: 33.3%;
}
.gkTestimonials figure {
text-align: center;
}
.gkTestimonials figure img {
border: 28px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
margin: 0 auto -75px auto;
}
.gkTestimonials figcaption {
background: transparent url('../images/testimonial_quote.png') no-repeat right bottom;
border-top: 1px solid #ddd;
padding: 66px 0 18px 0;
text-align: left;
}
.gkTestimonials figcaption q {
font-size: 18px;
font-style: italic;
font-weight: 300;
}
/* 2 columns */
.gk2Columns {
margin: 30px -50px 0 -50px;
}
.gk2Columns > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
padding: 0 50px;
width: 50%;
}
.gk2Columns figure {
text-align: center;
}
.gk2Columns figure img {
border: 28px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
margin: 0 auto -75px auto;
}
.gk2Columns figcaption {
background: transparent url('../images/testimonial_quote.png') no-repeat right bottom;
border-top: 1px solid #ddd;
padding: 66px 0 18px 0;
text-align: left;
}
.gk2Columns figcaption q {
font-size: 18px;
font-style: italic;
font-weight: 300;
}
