Flexbox - Boxes in rows and columns - RWD

[interactiveteam]

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

example1 hosted at ImgBB

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.

[interactiveteam]

I have found this:

Left column and stacked right column using flexbox CSS

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.

[coothead]

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.

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

coothead

[interactiveteam]

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.

[PaulOB]

@interactiveteam

Why it doesn’t work on Firefox correctly?

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

@interactiveteam

And why I don’t see <img> ?

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">

@interactiveteam

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.

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.

@interactiveteam

And how to make RWD <select> and <input> ?

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.