grid spacing between 2 columns at screen size 767

or how to disable this selector or override to have grid space...

please advise...

Hi there,

The other CSS we provided, you have your media query, add this CSS Rule inside that:

.generate-columns-container>*:nth-child(even) {
    padding-left: 20px;
}

Hi I added this, BUT it is showing grid space on first column also ???

Try to understand that this

@media (max-width: 767px)
.generate-columns-container>* {
    padding-left: 0;
}

causing the problem....

I updated the CSS above so it will only effect the right hand column.

GREAT, IT WORKS.

WITH 2 COLUMNS BLOG SETTING, following code gives 2 kinds of appearance on tabs and mobile.

Checked at http://quirktools.com/screenfly/

Following code may be of help to anyone here:

@media (max-width: 1000px) and (min-width: 600px) {
    .post.generate-columns {
        float: left;
        width: 50% !important;
    }
    .content-area {
        width: 100% !important;
    }
    .generate-columns-container>*:nth-child(even) {
	    padding-left: 20px;
	}
    .right-sidebar.separate-containers .site-main {
    	margin: 20px 0 0 0;
	}
    .sidebar {
        float: none !important;
        width: 100% !important;
        overflow: hidden;
        left: 0;
        right: 0; 
    }
}

@media (max-width: 1000px) {
	.separate-containers .inside-right-sidebar {
   		margin-top: 0 !important;
	}
}

Bye, and thanks again.

Glad to be of help. And thanks for sharing your final CSS

David, I checked one column was wider and one smaller width, so i updated your css with following:

    .generate-columns-container>*:nth-child(even) {
	    padding-left: 10px;
	}
    .generate-columns-container>*:nth-child(odd) {
	    padding-right: 10px;
	}

Actually grid space has to be equally divided between both columns.

Now, it is better than earlier one.... Bye.

Glad you got that resolved and thanks for sharing