February 8th, 2019 at 8:40 PM
(This post was last modified: February 8th, 2019 at 8:42 PM by Harry K..)
Hey man, nice share.
I'm a little curious as to why you've decided to use a large image of pure white to create a white background? You could simply use "background: #fff;".
Have you tried looking into flexbox?
You could save a lot of time and stress (it does for me
) using flexbox, achieving this sort of layout is hard no more! 
I'm going to show you the changes I would make to your CSS, might save you some time.
Then all it takes to make this layout responsive is this:
Be sure to add the responsive meta tag to inside your <head> to tell the browser your page is optimised for mobile.
Look at the difference: https://i.imgur.com/NYhunuw.mp4
Forgot to add the borders in the vid, try this:
I'm a little curious as to why you've decided to use a large image of pure white to create a white background? You could simply use "background: #fff;".
Have you tried looking into flexbox?
You could save a lot of time and stress (it does for me
) using flexbox, achieving this sort of layout is hard no more! I'm going to show you the changes I would make to your CSS, might save you some time.
Quote:....
.main{
/*background:transparent url(http://orig09.deviantart.net/d6e6/f/2015...8ceprb.jpg)
repeat-x 0 0;*/
background: #fff;
padding:28.2px;
/*overflow: scroll; Why add a scroll bar when there is no need? */
font-family: "Arial";
line-height: 13.3px;
font-size: 12.5px;
}
.inner-main{
padding:10px;
width:100%;
display: flex;
justify-content: space-evenly;
}
.inner-main > * { /* Use > * to select all direct children of the .inner-main class. */
width: 100%;
border-left: 1.5px dashed #000;
border-right: 1.5px dashed #000;
padding: 20px;
}
/* Remove all .columnsfit classes. */
.footer{
clear:both;
}
Then all it takes to make this layout responsive is this:
Code:
@media (max-width: 960px) {
.inner-main {
flex-wrap: wrap;
}
}Be sure to add the responsive meta tag to inside your <head> to tell the browser your page is optimised for mobile.
Code:
<meta name="viewport" content="width=device-width">Look at the difference: https://i.imgur.com/NYhunuw.mp4
Forgot to add the borders in the vid, try this:
Code:
.inner-main > * {
border-left: 3px dashed black;
}
.inner-main > *:last-child {
border-right: 3px dashed black;
}
@media (max-width: 960px) {
.inner-main > * {
border-right: 3px dashed black;
}
}![[Image: forumonic-bar.png]](https://forumonic.com/images/forumonic-bar.png)
![[Image: xige-logo-png-blue-sml.png]](http://xigeti.me/img/xige-logo-png-blue-sml.png){kind=logo}
