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 ???
Question about displaying responsive columns
-
- Posts: 242
- Location: Holland Rotterdam
Question about displaying responsive columns
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:
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.
- Use the Inspector in browser console (F12) to make tests with various css properties to view directly the changes in page.
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 */
}
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:
Dear Admin thanks for your support (i go to bed now)
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>
Similar Topics
-
Spatial Reality Display: Responsive, no-glasses 3D
Entertainment and Games
Sony has debuted a new kind of 3D monitor with its Spatial Reality Display, which tracks your eyes and shows a different dynamically-generated image...
-
Filter html table with multiple search in two columns
JavaScript - jQuery - Ajax
First post
I'm trying to do this: w3schools.com/howto/howto_js_filter_table.aspLast post
- But instead, to search with multiple search words in two columns of the same...
Split the search string by space and filter the column for each word. Try this code in your JS script:
function myFunction() {
var src, input,...