I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this:
https://i.sstatic.net/WiBXH.jpg
Initially, everything seemed fine. However, upon viewing the site on devices with portrait screens, the alignment appeared like this:
https://i.sstatic.net/Hu5hf.jpg
https://jsfiddle.net/V4u5X/880/
update!!!!
<div class="columnshop">
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<a href=""><img src="" alt=""></a>
</div>
<div class="price-details">
<span><a href="">Cabbage ( hidden,enabled)asndbbsddbsbsba</a></span>
<div class="price-number">$5.00</div>
<button id="addToCart" class="buttonlink">ADD TO CART</button>
<div class="clearfix"></div>
</div>
</div>
</div>
https://i.sstatic.net/FoHS7.jpg
https://jsfiddle.net/V4u5X/920/
Is there a way to ensure that the text stays within the div? Specifically, if the text exceeds the width of the class="grid_1_of_4 images_1_of_4", it should break appropriately within the div.