Laiqa Mohid
Reputation: 561
Flexbox not working - it seems to only apply to some of the child elements?
So in my code I have a press page with container set to flexbox. the img grid container has 23 card containers in them with images etc. All the cards aligned properly before (within img grid container) however, now only a part of the child elements have flexbox inherited but about 9 of the last items haven't. Posting some pictures. Here is my code. I know this is a lot of code in the HTML but a lot of it just repetition of containers, I'm new :( - have attached a screenshot, I want all the images to be in a row like the thin ones at the left. Thanks.
.img-grid {
width: 70vw;
height: 90vh;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 2rem;
overflow: scroll;
overflow-x: hidden;
}
.press-info {
width: 350px;
height: 460px;
padding: 1.5rem;
perspective: 1000;
}
.card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s linear;
font-family: Helvetica, sans-serif;
font-weight: bold;
}
.press-info:hover .card {
transform: rotateY(-180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
}
.face.front img {
width: 100%;
height: 100%;
}
.face.back {
background-image: var(--gradient);
background-size: 400%;
background-position: right;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 2rem;
color: black;
transition: background-position ease-out 0.8s;
}
.face.back:focus {
background-position: left;
}
.face.back a {
transform: uppercase;
font-size: 1rem;
}
.face.back a span {
font-size: 2rem;
}<div class="press-container">
<div class="img-grid">
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-1.png">
</div>
<div class="back face">
<a href="https://oddamagazine.com/project/fashions-future-designers/">ODDA MAGAZINE : FASHION'S
FUTURE
DESIGNERS <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-2.png">
</div>
<div class="back face">
<a href="#">HASHTAG LEGEND : MAY 2020</a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-3.png">
</div>
<div class="back face">
<a href="https://www.kaltblut-magazine.com/to-the-ones-that-hurt-the-most/">KALTBLUT Magazine : To
the
ones that hurt the most <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-23.png">
</div>
<div class="back face">
<a href="https://1granary.com/designers-3/graduate-shows/csm-ma-fashion-show-2020-full-line-up/">ONE
granary: CENTRAL SAINT MARTINS
MA FASHION SHOW
2020 : FULL LINE-UP <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-4.png">
</div>
<div class="back face">
<a href="https://wwd.com/fashion-news/fashion-scoops/central-saint-martins-ma-fashion-recycling-craftsmanship-1203487690/">WWD
: Central Saint Martins MA Fashion Champions Recycling and Craftsmanship <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-5.png">
</div>
<div class="back face">
<a href="#">milk magazine hk: october 2019 : FROM BLOOMING YOUTH TO FASHION</a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-6.png">
</div>
<div class="back face">
<a href="https://the-comm.online/blog/into-the-woods/">the comm online : into the woods
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-7.png">
</div>
<div class="back face">
<a href="https://www.sleek-mag.com/article/wearable-slime//">SLEEK MAGAZINE : Meet the CSM fashion
grad
making clothes out of slime <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-8.png">
</div>
<div class="back face">
<a href="https://1granary.com/designers-3/schools/central-saint-martins/one-year-out/">ONE GRANARY
: ONE
YEAR OUT<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-9.png">
</div>
<div class="back face">
<a href="https://whynow.co.uk/read/samson-leung-finds-richness-in-linguistic-mistakes-and-mistranslation/">why
now digital : Samson leung finds richness in liguistic mistakes and mistranslation
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-10.png">
</div>
<div class="back face">
<a href="https://www.dearboymag.com/stories/samson-leung">Dear Boy Magazine : Interview with Samson
Leung
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-11.png">
</div>
<div class="back face">
<a href="https://www.dewmagazine.com/under-the-radar-talent-samson-leung/">UNDER-THE-RADAR TALENT :
SAMSON
LEUNG <span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-12.png">
</div>
<div class="back face">
<a href="http://example.com/introducing-samson-leung/">I'm Young! : Introducing Samson
Leung
<span>⬈</span></a>
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-13.png">
</div>
<div class="back face">
<a href="">Rain Magazine -> Interview: Samson Leung
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-14.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-15.png">
</div>
<div class="back face">
</div>
</div>
</div>
<!-- </div> -->
<!-- <div class="press-column -4"> -->
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-16.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-17.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-18.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-19.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-20.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-21.png">
</div>
<div class="back face">
</div>
</div>
</div>
<div class="press-info">
<div class="card">
<div class="front face">
<img src="press/press-22.png">
</div>
<div class="back face">
</div>
</div>
</div>
</div>
</div>Upvotes: 1
Views: 69
Answers (1)
Dan Mullin
Reputation: 4435
You are missing one closing <a> tag
<a href="">Rain Magazine -> Interview: Samson Leung
Upvotes: 2
Related Questions
- How do I make flexbox even begin to work? It's doing nothing
- Why is flex box not working as expected in my code?
- Flexbox struggles
- CSS flexbox breaking behaviour
- CSS Flex Not Working
- HTML and Flexbox structure not working as expected
- Why is my flexbox not working correctly?
- Flexbox styling not applying to elements
- Why does my html flex code only work in some broswers?
- nested CSS3 flexboxes not working