Flexbox - Boxes in rows and columns - RWD

Today next day of front end learning. So my problem is this:

Left column is these 6 boxes under text “Wybierz kwotę” and right column is this grey box over text “Interestingly Unique Project”.

I tried with flexbox

display: flex;
flex-direction: row;

but it doesn’t work.

How to make left column in rows and columns and when small size (RWD) these boxes should by one under one. The other problem is in smartphones RWD sizes the right column is over left column.

I have found this:

I will try to do it with this.

But I have got other problem with this.

On PC the left column from this graphic (first post) is 772px and right column is 365px.
PC size is 1137px.

So how to dimension to make it RWD? For smaller sizes.

Hi there interactiveteampl,

until you supply members with your problematic HTML
and it’s relevant CSS code, it is doubtful that you will
receive any worthwhile assistance from them. :unhappy:

Unfortunately, without it, they’re unable to see what’s what. :rofl:

coothead

1 Like

http://interactiveteam.pl/index1/index1.html

Why it doesn’t work on Firefox correctly?
On Chrome and Opera is good.
And why I don’t see <img>?
And how to make RWD <select> and <input>?
And other problem is how to make right side over left side on smartphones? I tried order: 1 and order: 2 and it doesn;t work.

Explain what doesn’t work exactly? It looks much the same to me on both Chrome and Firefox.

Because you are looking in the wrong directory.

You have this:

<img src="img/photo.png">

But the image is actually here:

<img src="index1/img/photo.png">

It does work but you added display:flex to the left and right side elements and thus broke the column layout of those elements.

Remove display:flex from .right-side and .left-side.

Note that you can only move the whole right column above the whole left column when you use the order property. You can’t interleave those elements if that’s what you were intending.

You would give them a width in percentage so that they stretch to match their parent. (A max-width will only ensure a max-width it does not encourage the element to grow from its default.)

You seem to have the whole bootstrap framework css attached to your code so you should really be doing this in bootstrap if you already have that code overhead.