[Resolved] grid spacing between 2 columns at screen size 767

[Anil]

hi

following css abolish grid space between 2 colums, how to have same grid space between 2 columns as on bigger screen size???

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

GeneratePress 2.2.2

GP Premium 1.7.8

[Anil]

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

[Anil]

please advise…

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anil]

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

[Anil]

Try to understand that this

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

causing the problem….

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anil]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anil]

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.

[David]

Glad you got that resolved and thanks for sharing

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts