Angel Politis Angel Politis - 5 months ago 5
HTML Question

Why is my second element of the second row deciding for itself?

I am trying to create a store and I want to display the products based on the width of the screen.


  1. Initially I want to display 3 products per row.

  2. If then the screen is resized so that only two can fit, I want the third to move to another row below.



Currently, I am stuck at making three of them be on the same row and a really weird outcome is produced when my code is run. I am not sure if that's how it's supposed to work out but I believe that it's not.

The second element of the first row stays in the centre while the second element of the second row sticks to its preceding element and go places together.

If you check out this fiddle and try resizing the window you will see what I mean.

I would appreciate any help.

(I use no external plugins)

I have also create a snippet for you here in case that's to your preference.



#section1 {
/* Text */
text-align: justify;
/* Dimensions */
height: 500px;
/* Visibility */
display: block;
}
#section1 > h1 {
/* Positioning */
position: relative;
margin-top: 50px;
}
.hot-topic {
/* Text */
font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
line-height: 1.5;
font-size: 15px;
font-weight: 400;
/* Dimensions */
width: 282px;
/* Positioning */
position: relative;
margin-top: 50px;
/* Visibility */
display: inline-block;
/* Styling */
background-color: #0c0c0c;
border: 5px solid #0c0c0c;
border-radius: 2px;
box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
/* Text */
color: #999999;
font-size: 1.0rem;
line-height: 1.2;
text-overflow: ellipsis;
/* Positioning */
margin: 5% 0 2% 3%;
overflow: hidden;
/* Visibility */
display: block;
}
.topic {
/* Dimensions */
width: 282px;
height: 159px;
/* Styling */
background-color: white;
background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.topic:hover {
/* Styling */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);
}
.topic:hover + .caption {
display: block;
}
.caption {
/* Text */
color: white;
font-size: 0.8rem;
text-align: center;
/* Dimensions */
width: 265px;
height: 159px;
/* Positioning */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0% 3% 0 3%;
/* Visibility */
display: none;
/* Styling */
background: rgba(0, 0, 0, .8);
}
.caption:hover {
/* Visibility */
display: block;
}
.caption-wrapper {
/* Text */
text-align: justify;
}
.button-wrapper {
/* Positioning */
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
/* Text */
color: white;
/* Positioning */
position: relative;
padding: 5px 10px;
/* Styling */
background-color: transparent;
border: 1px solid white;
outline: none;
}

<div id="section1" class="wrapper">
<div class="hot-topic">
<div class="topic"></div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p>
<p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<div class="button-wrapper">
<button class="button">Read More</button>
</div>
</div>
<h3>**1** HP Pavilion Slimline S5 1010</h3>
</div>

<div class="hot-topic">
<div class="topic"></div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p>
<p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<div class="button-wrapper">
<button class="button">Read More</button>
</div>
</div>
<h3>**2** HP Pavilion Slimline S5 1010</h3>
</div>

<div class="hot-topic">
<div class="topic"></div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p>
<p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<div class="button-wrapper">
<button class="button">Read More</button>
</div>
</div>
<h3>**3** HP Pavilion Slimline S5 1010</h3>
</div>

<div class="hot-topic">
<div class="topic"></div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p>
<p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<div class="button-wrapper">
<button class="button">Read More</button>
</div>
</div>
<h3>**4** HP Pavilion Slimline S5 1010</h3>
</div>

<div class="hot-topic">
<div class="topic"></div>
<div class="caption">
<div class="caption-wrapper">
<p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p>
<p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
</div>
<div class="button-wrapper">
<button class="button">Read More</button>
</div>
</div>
<h3>**5** HP Pavilion Slimline S5 1010</h3>
</div>
</div>




Roi Roi
Answer

See if this is what you wanted

https://jsfiddle.net/6nzuh9js/4/

     <div id = "section1" class = "wrapper">
            <div class = "hot-topic">
                <div class = "topic"></div>
                <div class = "caption">
                    <div class = "caption-wrapper"><p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p><p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p></div>
                    <div class = "button-wrapper"><button class = "button">Read More</button></div>
                </div>
                <h3>**1** HP Pavilion Slimline S5 1010</h3>
            </div>

            <div class = "hot-topic">
                <div class = "topic"></div>
                <div class = "caption">
                    <div class = "caption-wrapper"><p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p><p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p></div>
                    <div class = "button-wrapper"><button class = "button">Read More</button></div>
                </div>
                <h3>**2** HP Pavilion Slimline S5 1010</h3>
            </div>

            <div class = "hot-topic">
                <div class = "topic"></div>
                <div class = "caption">
                    <div class = "caption-wrapper"><p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p><p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p></div>
                    <div class = "button-wrapper"><button class = "button">Read More</button></div>
                </div>
                <h3>**3** HP Pavilion Slimline S5 1010</h3>
            </div>

            <div class = "hot-topic">
                <div class = "topic"></div>
                <div class = "caption">
                    <div class = "caption-wrapper"><p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p><p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p></div>
                    <div class = "button-wrapper"><button class = "button">Read More</button></div>
                </div>
                <h3>**4** HP Pavilion Slimline S5 1010</h3>
            </div>

            <div class = "hot-topic">
                <div class = "topic"></div>
                <div class = "caption">
                    <div class = "caption-wrapper"><p>This HP Pavilion Slimline S5 1010, one of of the best machines HP has to offer.</p><p>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p></div>
                    <div class = "button-wrapper"><button class = "button">Read More</button></div>
                </div>
                <h3>**5** HP Pavilion Slimline S5 1010</h3>
            </div>
        </div>

CSS

#section1 {
    text-align: center;
    /* Visibility */
    display: block;

    border: 1px solid red;
}

#section1 > h1 {    
    /* Positioning */
    position: relative;
    margin-top: 50px;
}

.hot-topic {
    /* Text */
    font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
    line-height: 1.5;
    font-size: 15px;
    font-weight: 400;

    /* Dimensions */
    width: 282px;

    /* Positioning */
    position: relative;
    margin: 50px 20px 0 20px;

    /* Visibility */
    display: inline-block;

    /* Styling */
    background-color: #0c0c0c;
    border: 5px solid #0c0c0c;
    border-radius: 2px;
    box-shadow: 2px 2px 3px;
}

.hot-topic > h3 {
    /* Text */
    color: #999999;
    font-size: 1.0rem;
    line-height: 1.2;
    text-overflow: ellipsis;

    /* Positioning */
    margin: 5% 0 2% 3%;
    overflow: hidden;

    /* Visibility */
    display: block;
}

.topic {
    /* Dimensions */
    width: 282px;
    height: 159px;

    /* Styling */
    background-color: white;
    background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.topic:hover {
    /* Styling */
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);
}

.topic:hover + .caption {
    display: block;
}

.caption {
    /* Text */
    color: white;
    font-size: 0.8rem;
    text-align: center;

    /* Dimensions */
    width: 265px;
    height: 159px;

    /* Positioning */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0% 3% 0 3%;

    /* Visibility */
    display: none;

    /* Styling */
    background: rgba(0, 0, 0, .8);
}

.caption:hover {
    /* Visibility */
     display: block;
}

.caption-wrapper {
    /* Text */
    text-align: justify;
}

.button-wrapper {
    /* Positioning */
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button {
    /* Text */
    color: white;

    /* Positioning */
    position: relative;
    padding: 5px 10px;

    /* Styling */
    background-color: transparent;
    border: 1px solid white;
    outline: none;
    }
Comments