Having trouble sizing images

I want the 4 images in the #styles to be a 2x2 grid and I want the whole grid to be 50% of the browser/screen. The issue is that I’ve been A LOT of time trying to resize them and nothing seems to work. The bizarre part is that some random times it changes the width OR the height of the first row/column, but never both.

The coding of the specific part is:

HTML:

</div>
        <div class="section" id="styles">
            <div class="navbar__hidder">
                <br>
                <br>
                <br>
            </div>
            <div class="styles__container">
            <h2>Millones de estilos: encontremos el tuyo!</h2>
                <div class="slides" id="carrousel">
                    <div class="slider">
                        <div class="slide" id="slide1"><img src="matilda 21-08-2020.jfif" alt="La perra Matilda con un corte oriental y rulos hechos en las orejas."></div>
                        <div class="slide" id="slide2"><img src="estrella 17-07-2020.jpg" alt="La perra Estrella con un corte de osito clásico y las orejas teñidas con un degradé de azul a violeta."></div>
                        <div class="slide" id="slide3"><img src="pelusa 16-10-2020.jpg" alt="La perra Pelusa con un corte oriental de patas muy anchas y un top knot armado bien alto."></div>
                        <div class="slide" id="slide4"><img src="mia 19-07-2020.jpg" alt="La perra Mía con dos colitas, corte oriental y la punta de las patitas teñidas de violeta."></div>
                    </div>                    
                </div>
            </div>
        </div>

CSS:


#slide1 {
    width: 100px;
    height: 100px;
}

#slide2 {
    width: 100px;
    height: 100px;
}

#slide3 {
    width: 100px;
    height: 100px;
}

#slide4 {
    width: 100px;
    height: 100px;
}

I guess there’s something wrong in the HTML tho because I tried A LOT of different things in CSS and nothing seemed to work.

Your HTML is fine.

/*This controls the individual divs in the slider div.... You can play around with it*/

.slider #slide1, #slide2, #slide3, #slide4{
  width: 200px;
  height: 200px;
  margin: 5px;
}

/*resize your images here*/

.slider img{
  width: 200px;
  height: 200px;
}

.slider {
  display: inline-grid;
  grid-template-columns: auto auto; /*add "auto's" or remove them and see what happens*/
  margin: 10px;
}

I’m a newbie by the way so I’m sure there’s a better way but this should help.

Oh and if you are gonna use pictures from your pc, include the path too… for them to display. "C:\Users\User…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.