Question about displaying responsive columns

[JanMolendijk]

For weeks i`m buissy with responsive columns, to find out how i can improve it.
First i check for myself, because i do not want to bother you too often.
After-all finaly i come here for my Course.

i have two questions...
1. How can stick columns on the Y-as.
2. When we make the browser-window smaller i would like to see that the two-columns (flip or split) into one-column-part ???
How can i improve this ???

To make good responsive design, try study more "css responsive tutorials"; just look on internet for what you want to learn.
For example, search on internet: " css responsive center div ".

On this site you can find:

1. About centering elements in page:
https://coursesweb.net/css/centering-text-block-image_t

2. Two tutorials about css flexbox:
https://coursesweb.net/css/css3-flexbox-container
https://coursesweb.net/css/css3-flexbox-item

- In css you can use @media screen to change and set css properties according to window`s sizes.

Code: Select all

@media screen and (max-width: 600px) {
  /* css properties for page with maximum width 600px */
}

- Use the Inspector in browser console (F12) to make tests with various css properties to view directly the changes in page.

I almost did not slept for few day`s... & Finaly i found something i share it for the other visitors.
I gonna use flexbox to show data into multiple columns with 16 rows.

Example flexbox code:

Code: Select all

<style>
.flexbox{
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexbox div {
  width: 40%;
  background: green;
  height: 30%;
}
.flexbox .one, .flexbox .two{
  height: 45%;
}

</style>

<div class="flexbox">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
  <div class="four">four</div>
  <div class="five">five</div>
  ...
</div>

Dear Admin thanks for your support (i go to bed now)