Archived topic
How to define grid-columns without space between columns and rows
5 replies · Started by Hans-Hermann Loewer on November 16, 2020
Hi Tom and Team,
how can I define (with CSS?) grid-columns without space between columns and rows (means: shown as one single picture /full screen) on one special page within my wordpress site?
I'm using Html as follows:
<br />
Would be perfect, if I could delete background-pictures for that site too
(customizer: backgroundpictures --> content --> uploaded image).
Thanks in advance!
Hermann
Sorry, the html-tags were deleted by the forum-software.
I´m using div classes with 50%, 50% for tablet, 100% for mobile in each column, in 2 rows.
Hi,
Sorry, the html-tags were deleted by the forum-software.
You can use the "CODE" formatting tool so the html-tags display in text form on your replies.
https://share.getcloudapp.com/ApuLZXZy
how can I define (with CSS?) grid-columns without space between columns and rows (means: shown as one single picture /full screen) on one special page within my wordpress site?
There are plenty of reasons why there are "space" between columns and rows. To remove this "space" we must first know what is causing it. But all of them can easily be dealt with using custom CSS.
If the space is caused by a margin or padding, we can simply add "margin: 0px; padding: 0px;" CSS property to the CSS selector.
If container is actually using display:grid; and uses grid-gap(horizontal and vertical), grid-row-gap(horizonal) or grid-column-gap(vertical), we can use this properties to also remove them by setting 0px value much like what we did with margin and padding.
Example:
.your-grid{
display:grid;
grid-gap: 0px;
}
https://www.w3schools.com/cssref/pr_grid-gap.asp
You may find this useful: https://css-tricks.com/snippets/css/complete-guide-grid/
Hi Elvin,
meanwhile I could delete the horizontal space between the columns with the following code for the first row:
@media (min-width: 782px) {
.grid-25 {
padding: 0;
}
}
and for the second row with:
@media (min-width: 782px) {
.grid-33 {
padding: 0;
}
}
But how can I delete the space between the two rows too?
Thanks in advance for your help!
Hermann
Additional info:
Everything OK now.
There was a <br /> -tag with a behind the first row.
Additional info:
Everything OK now.
There was a <br /> -tag with a behind the first row.
Good catch! Glad to be of any help. :D
