Question about displaying responsive columns

User avatar
JanMolendijk
Posts: 117
Location: Holland Rotterdam

Question about displaying responsive columns

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

Admin
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:
http://coursesweb.net/css/centering-text-block-image_t

2. Two tutorials about css flexbox:
http://coursesweb.net/css/css3-flexbox-container
http://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.

JanMolendijk
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)

Similar Topics