[Resolved] How to define grid-columns without space between columns and rows

Home Forums Support [Resolved] How to define grid-columns without space between columns and rows

Home Forums Support How to define grid-columns without space between columns and rows

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1533777
    Hans-Hermann Loewer

    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:

    [img-content]
    [img-content]

    <br />

    [img-content]
    [img-content]

    Would be perfect, if I could delete background-pictures for that site too
    (customizer: backgroundpictures –> content –> uploaded image).

    Thanks in advance!
    Hermann

    #1533781
    Hans-Hermann Loewer

    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.

    #1533804
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1534326
    Hans-Hermann Loewer

    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

    #1534334
    Hans-Hermann Loewer

    Additional info:
    Everything OK now.
    There was a <br /> -tag with a &nbsp; behind the first row.

    #1535202
    Elvin
    Staff
    Customer Support

    Additional info:
    Everything OK now.
    There was a <br /> -tag with a   behind the first row.

    Good catch! Glad to be of any help. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.