After completing the development of a website at , I tested it on my PC and everything looked good. However, when I asked a friend to review the site, she pointed out that on mobile devices, the section with 4 boxes was appearing squeezed together despite looking fine on a PC.
Upon checking the issue on my own phone, I noticed the same problem but couldn't figure out the reason behind it. Below is the code structure that I used for this specific section - just for reference, the site is based on Wordpress and I had to customize this area due to difficulties with the built-in column feature.
I would greatly appreciate any feedback or suggestions regarding this matter.
<style>
.gallery_container{
max-width: 1200px;
padding: 30px;
margin: 20px auto;
}
#shop_column{
column-count: 2;
column-gap: 15px;
}
#shop_page{
text-align: center;
font-family: 'Tangerine', cursive;
font-size: 36px;
padding: 0px;
margin: 0px auto;
}
#shop_image{
cursor: pointer;
width: 750px;
height: 345px;
padding: 10px;
margin: 10px auto;
}
</style>
<div class="gallery_container">
<div id="shop_column">
<a href="http://services.codexcentre.com/new-build/">
<img id="shop_image" src="imgs/home01.jpg">
</a>
<p id="shop_page">New Build</p>
<a href="http://services.codexcentre.com/dining-remodel/">
<img id="shop_image" src="imgs/dining01.jpeg">
</a>
<p id="shop_page">Living Room Remodel</p>
</div>
<div id="shop_column">
<a href="http://services.codexcentre.com/kitchen-remodel/">
<img id="shop_image" src="imgs/kitchen01.jpg">
</a>
<p id="shop_page">Kitchen Remodel</p>
<a href="http://services.codexcentre.com/bathroom-remodel/">
<img id="shop_image" src="imgs/bathroom01.jpg">
</a>
<p id="shop_page">Bathroom Remodel</p>
</div>
</div>