In my search for answers, I have come across a few similar questions that don't quite address what I'm looking for.
Currently in the process of creating a portfolio website utilizing bootstrap 3, I aim to display three images across on small/medium/large screens and only two images across on extra-small screens within a div box.
The HTML structure for the images is contained within a div as shown below:
<div class="row" id="artpieces">
<div class="col-md-12 col-xs-12">
CODE FOR THE IMAGES
</div>
</div>Thus far, I've been able to achieve my desired layout of three images by using the following CSS:
#artpieces .col-md-12 img {
width: 33%;
}My attempts at adjusting the width for extra-small screens with the code below have not been successful:
#artpieces .col-xs-12 img {
width : 49.5%;
}Despite testing the percentages individually, they do not produce the desired outcome when combined. I suspect there may be a simple mistake that eludes me. As a novice in web development focusing on learning and practicing HTML and CSS, this issue presents the first significant challenge I've encountered.