At the moment I am trying to program the wireframe I have made, but experience some problems with specially the left side of the element:
The problem is that the 200x200px image is going full width in the left column. Therefore I cannot center the image.
I can see it can be changed with overwriting the following CSS, and set the width to none;.
.cms-area img {
width: 100%;
}
But as I see it will break the reponsive on the images?
Can anybody help me in goal here?
See the [Testpage here][2].
The site is still using Bootstrap 3, and I do not have access to change the main CSS. Therefore I need to overwrite CSS if I need that.
Best regards
<style>
#front .row {
padding-bottom: 0px;
}
.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-white-bg {
padding: 15px;
background-color: #fff;
margin-bottom:30px;
border: 1px solid #ebecf0;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.padding-grey-bg {
padding: 7.5px;
}
.padding-white-border {
border: 1px solid #ebecf0;
}
.top-pad-d {
padding-top: 15px;
}
.sbp-2-column {
background-color:#fff;
padding-top:15px;
padding-bottom:15px;
border:1px solid #ebecf0;
}
/********************************/
/* Product styling */
/********************************/
/* Make spot image go full width */
.cms-area .result-cols ul.items li.add-item {
width: 100% !important;
}
.cms-area .result-cols ul.items li.add-item .item {
padding: 0px;
}
/* Remove add to basket button */
.cms-area .result-cols ul.items li.add-item a.button-add {
display:none;
}
/* Set height on product description */
.cms-area .result-cols ul.items li.add-item .desc {
height: 0px;
overflow: visible;
}
/* Remove fade on product headline */
.cms-area .result-cols ul.items li.add-item .desc:after {
background: none;
}
.cms-area .result-cols .more-wrap {
padding-bottom: 0px;
}
/* Remove Sub-heading */
.desc2{
display:none;
}
/* Remove product text */
.ext-description {
display:none;
}
/* Remove padding multiple products on row */
.cms-area .result-cols {
padding:0px;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
@media screen and (max-width: 896px){
.top-pad-m {
padding-top: 15px;
}
}
@media only screen and (max-width: 1280px) {
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 60vh;
}
}
/********************************/
/* Overall Styling */
/********************************/
#sbp-hr {
margin-top:10px !important;
margin-bottom:10px !important;
}
.sbp-align {
text-align: left;
padding-left:10px;
}
.test {
padding:20px 20px 20px 20px;
}
/* TEST on 2 column */
.classWithPad { margin:8px; padding:10px; background-color: #fff; border:1px solid #ebecf0;}
.cms-area img {
max-width: 100%;
}
</style><div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">
<p style="padding:75px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" class="img-responsive test"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>