Rather than reinvent the wheels, I think that you need to use the underlying bootstrap scaffolding (built-in to Customizr) to display your image and text combinations. That way, the responsiveness will be guaranteed at all screen sizes.
As well as the link above, take a look at Nikeo’s explanation here.
Add the following to a wordpress page, save as a draft and preview it. This will show you the power of the underlying scaffolding that is there for the taking if you want to use it.
I have deliberately included inline styles so that you can see what’s happening. Once you publish, you can remove these, of course.
<style>
.my-bootstrap-grid {
margin-top: 10px;
margin-bottom: 20px;
}
.my-bootstrap-grid [class*="span"] {
background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 20px;
line-height: 20px;
}
.my-bootstrap-grid [class*="span"]:hover {
background-color: #ddd;
}
.my-bootstrap-grid .show-grid {
margin-top: 0;
margin-bottom: 0;
}
.my-bootstrap-grid .show-grid [class*="span"] {
margin-top: 5px;
}
.my-bootstrap-grid [class*="span"] [class*="span"] {
background-color: #ccc;
}
.my-bootstrap-grid [class*="span"] [class*="span"] [class*="span"] {
background-color: #999;
}
</style>
<h3>4 x span3 example:</h3>
<p>This example shows how to add 4 separate grid elements. When they "flow" on smaller screens, each element will stack on top of the others equally.</p>
<div class="row-fluid my-bootstrap-grid">
<div class="span3">
Add IMG1 here
</div>
<div class="span3">
Add TEXT1 (related to IMG1) here
</div>
<div class="span3">
Add IMG2 here
</div>
<div class="span3">
Add TEXT2 (related to IMG1) here
</div>
</div>
</br>
</br>
<h3>2 x span6 (each containing 2x span6) example:</h3>
<p>This example shows how to add 4 grid elements, as above, but in 2 groups of element-pairs. When they "flow" on smaller screens, they will stack nicely as above, but in addition the element-pairs will be closer together.</p>
<div class="row-fluid my-bootstrap-grid">
<div class="span6">
<div class="row-fluid my-bootstrap-grid">
<div class="span6">
Add IMG1 here
</div>
<div class="span6">
Add TEXT1 (related to IMG1) here
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid my-bootstrap-grid">
<div class="span6">
Add IMG2 here
</div>
<div class="span6">
Add TEXT2 (related to IMG2) here
</div>
</div>
</div>
</div>
<p><strong>A note about the shading:</strong> The shading is added for illustration purposes. However, you may wish to leave it in if you want to group items on the page. To do this, remove all the CSS inside the style tags above and place them in your child theme's style.css, or in the Custom CSS panel of Customiz'it.</p>
Words of warning:
– You need a separate <div class="row-fluid my-bootstrap-grid">...</div> block for each row of content. In your case, this translates to each row of 2 images / 2 text blocks.
– While your product page is a perfect candidate for the scaffolding, you need to be scrupulous about commenting your html / maintaining indents. One deleted <div> in a page like yours and you’ll be tearing your hair out trying to find what’s wrong. I recommend a good html editor with a cut and paste into the WordPress edit screens, rather than editing directly in WordPress.
Let us know how you get on.
