Hi,
I drew two lines (black and red) as pseudo elements.
1.
How would I move the red line to the center?
For the black line, I didn't do anything for it.
2.
With the red line, there is a difference to the photo and to the text.
I gave "margin-top" to .footnote and .fn1, but it didn't work.
How would I shift the text down?
Hosun Kang
It's much cleaner to wrap your thumbnail images in a 'section' element:
<section class="thumbnails">
<div><img src="images/thumbnail1-love.png" alt="pic1"></div>
<div><img src="images/thumbnail2-office.jpg" alt="pic2"></div>
<div><img src="images/thumbnail3-dan.jpg" alt="pic3"></div>
<div><img src="images/thumbnail4-beer.jpg" alt="pic4"></div>
<div><img src="images/thumbnail5-report.png" alt="pic5"></div>
<div><img src="images/thumbnail6-indesign.png" alt="pic6"></div>
</section>
Then use the css below to position them, plus its easy to apply the top and bottom border to the 'section' rather than using 'before' and 'after'
.thumbnails {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-top: 1px solid #000;
border-bottom: 1px solid red;
padding: 10px 0 0 0;
margin: 0 1% 15px 1%;
}
.thumbnails img {
max-width: 100%;
height: auto;
display: block;
}
.thumbnails div {
width: 32%;
margin: 0 0 15px 0;
}
/*Tablet View*/
@media (max-width: 1024px) {
.thumbnails div {
width: 48%;
}
}
/*Mobile View*/
@media (max-width: 500px) {
.thumbnails div {
width: 100%;
}
}
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices