CODEWITHSUNDEEP
htmlcssflexbox
NodeReact020
NodeReact020

Reputation: 506

CSS Flex-box not acting responsive

Within my project I have a container <div> to which I add a border so it's visible to the user.

I add display: flex; to the container so it can take advantage of flex box. My current code works perfectly. This is because it is currently fully responsive, meaning when I resize the window from the right or left side, the container also moves which is perfect for responsiveness.

Here is my current code:

 <div class="flex-container">
            <h1>YO!</h1>
 </div>

.flex-container {
    display: flex;
    flex-direction: row;
    border: 1px solid #e3e3e3;
    justify-content:center;
    align-items: center;
    margin-left: 40px;
}

However, when I add a width and height to the .flex-container, it doesn't act responsive when I resize the window - the container doesn't move with it.

So this happens when I add this to the container:

width: 350px;
height: 615px;

Does anybody know why this is happening? Is there a certain way to set a width and height of the container that has display: flex; set on it? Thank you.

Upvotes: 0

Views: 3131

Answers (3)

Miro Nomadic
Miro Nomadic

Reputation: 30

So instead of 

width: 350px;

Do like this

width: 100%;
max-width: 350px;

Here is a link https://jsfiddle.net/mironomadic/5cvgmpth/3/ for it working

Also if you need to stack the columns on top of each other change 

flex-direction: row;

To 

flex-direction: column;

Upvotes: 1

alex067
alex067

Reputation: 3281

It's because you're adding a fixed width and height. This is irregardless of wether the element is set to display flex.

You're telling the container that it has a static, fixed width of 350px. 350px is an absolute value, it isn't relative to the size of the screen.

If you're using flex, you can use flex-basis and set a percentage to set the width of the container, and even more advanced: use flex-grow or flex-shrink to responsively shrink or expand the container, depending on the container size.

Upvotes: 2

c_sagan
c_sagan

Reputation: 512

Typically a regular width parameter isn't very responsive design.

Changing width: 350px to max-width: 350px will likely achieve the result you are looking for (although this size doesn't leave much room for growth, it will shrink in response to changing window size below 350px width).

Upvotes: 0

Related Questions