Home › Forums › Support › grid spacing between 2 columns at screen size 767 This topic has 10 replies, 2 voices, and was last updated 5 years ago by David. Viewing 11 posts - 1 through 11 (of 11 total) Author Posts April 8, 2019 at 7:44 pm #863459 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; } April 8, 2019 at 8:00 pm #863464 Anil or how to disable this selector or override to have grid space… April 9, 2019 at 2:39 am #863667 Anil please advise… April 9, 2019 at 4:27 am #863755 DavidStaff Customer Support 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; } April 9, 2019 at 9:13 am #864217 Anil Hi I added this, BUT it is showing grid space on first column also ??? April 9, 2019 at 9:15 am #864221 Anil Try to understand that this @media (max-width: 767px) .generate-columns-container>* { padding-left: 0; } causing the problem…. April 9, 2019 at 9:17 am #864223 DavidStaff Customer Support I updated the CSS above so it will only effect the right hand column. April 9, 2019 at 9:35 am #864239 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. April 9, 2019 at 10:00 am #864268 DavidStaff Customer Support Glad to be of help. And thanks for sharing your final CSS April 9, 2019 at 9:23 pm #864598 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. April 10, 2019 at 5:27 am #864859 DavidStaff Customer Support Glad you got that resolved and thanks for sharing Author Posts Viewing 11 posts - 1 through 11 (of 11 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In