I'm currently in the process of developing a website and I've encountered an issue with lists. Specifically, I'm trying to make one particular image within the list slightly larger as it appears smaller compared to the others.
For visual reference, here's the image: https://i.sstatic.net/hd6kh.jpg
To achieve the layout of stacking three images on top and below each other, I have divided them into two separate lists; one for the top three and another for the bottom three. This is where I believe the problem lies.
I attempted to use the following CSS code to address the issue (note that I used 2px to demonstrate the effect):
.white-container ul li:nth-child(3) img {
width: 2px;
}
Using this code generated the following outcome: https://i.sstatic.net/yU2xu.jpg
Here is the HTML code snippet:
<div class="white-container">
<div class="container">
<div>
<ul class="firstthree">
<li>
<img src="images/brush.svg" class="brush" alt="brush">
<p class="brush">Graphic Design</p>
</li>
<li>
<img src="images/wand.svg" class="wand" alt="wand">
<p class="wand">UI Design</p>
</li>
<li>
<img src="images/code.svg" class="code" alt="code">
<p class="code">Front-end Dev</p>
</li>
</ul>
</div>
<div>
<ul class="secondthree">
<li>
<img src="images/settings.svg" class="settings" alt="settings">
<p class="settings">Back-end Dev</p>
</li>
<li>
<img src="images/database.svg" class="database" alt="databases">
<p class = "database">Databases</p>
</li>
<li>
<img src="images/mobile.svg" class="mobile" alt="mobile">
<p class="mobile">Mobile Devices</p>
</li>
</ul>
</div>
</div>
</div>
I don't want the image at the bottom right to change. I'm struggling to find an alternative solution. I also tried using:
.white-container ul firstthree li:nth-child(3) img {
thinking it would work, but unfortunately, it didn't produce the desired result. Any advice or assistance would be greatly appreciated. Thank you!