CODEWITHSUNDEEP
htmlcssflexbox
SpicyPat
SpicyPat

Reputation: 85

CSS Flexbox - Why are my images overlapping?

New to flexbox here. I am creating a media query so that when the window collapses or is on a mobile device, the flexbox items collapse into a single column instead of side by side.

I have successfully achieved this with other elements, but for some reason the images below are overlapping instead of collapsing into a column. I did not set position: absolute;

Note: I am developing on Salesforce, so the image src is a Salesforce specific function

HTML:

<div class="container-2">
    <div class="post1">
        <img src="{!URLFOR($Resource.post1)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample post</p>
    </div>
    <div class="post2">
        <img src="{!URLFOR($Resource.post2)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample Post</p>
    </div>
</div>

CSS

.container-2 {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 10px;
    justify-content: center;
    flex-direction: column;
}
        
.post1, .post2 {
    flex: 1;    
}

Upvotes: 1

Views: 881

Answers (2)

MintWelsh
MintWelsh

Reputation: 1259

First a little code cleanup

HTML

<div class="container-2">
    <div class="post1">
        <img src="{!URLFOR($Resource.post1)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample post</p>
    </div>
    <div class="post2">
        <img src="{!URLFOR($Resource.post2)}" width="252px" height="157px"/>
        <br/>
        <br/>
        <p class="caption">Sample Post</p>
    </div>
</div>

CSS

.container-2{
  display: flex;
    flex-flow: wrap;
    margin-top: 10px;
    justify-content: center;
}

.post1, .post2 {
    flex:1;
}

I think this is all you need, you don't want it to be in direction:column; you want it to be side by side, except to wrap into a column when not enough space, is that correct?

https://codepen.io/philwelsh/pen/JjRzJBV

is this correct for what you want

Upvotes: 1

Dolotboy
Dolotboy

Reputation: 359

I've already got a problem like, the problem was because I was sizing the image directly in the HTML, you should try to size them by the css file and to use % instead of px.

<div class="container-2">
    
    <div class="post1">
        <img src="{!URLFOR($Resource.post1)}"/>
        <br/>
        <br/>
        <p class="caption">Sample post</p>
    </div>
    <div class="post2">
        <img src="{!URLFOR($Resource.post2)}"/>
        <br/>
        <br/>
        <p class="caption">Sample Post</p>
    </div>
</div>




CSS

.container-2{
    
    display:flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: 10px;
    justify-content: center;
    flex-direction: column;
}
        
.post1{
    
    flex:1;

}

.post1 img{

    width: 10%;
    height: 2%;

}

.post2 {
   
    flex:1;
    
}

.post2 img{

    width: 10%;
    height: 2%;

}

Not tested, but it should help :)

Upvotes: 0

Related Questions