Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 4, 2023 at 3:03 pm #1418039
    tyronere

    Hello all
    I have a problem I can’t seem to find a solution to. I have 4 columns and want a white gap between columns 2 & 3 only and no gap between 1 & 2 and 3 & 4.
    Does anyone know a way to do this?
    Thanks

    September 4, 2023 at 3:09 pm #1418040
    Yigit

    Hey,

    Please post a link to your page where we can see your layout and a screenshot showing the changes you’d like to make. You can upload your screenshots on imgur.com and share the links with us.

    Regards,
    Yigit

    September 4, 2023 at 4:51 pm #1418080
    tyronere

    Here you go. I’m trying to create this effect.

    View post on imgur.com

    September 5, 2023 at 8:04 am #1418121
    Ismael

    Hi,

    According to the screenshot provided, you can use the 1/2 Column elements to create a grid of four items. Afterward, you can manually insert HTML to generate an additional set of columns within either a Code Block or a Text Block. These columns will contain the image and other details shown in the screenshot. You may need to add a few CSS modifications to get everything in order.

    Please kindly share the site URL in the private field so that we can provide an appropriate solution.

    Best regards,
    Ismael

    September 5, 2023 at 8:40 am #1418127
    tyronere

    Hi Ismael

    Thanks for your response. I’ve entered the information as requested. The grey bar is where the existing 4 columns are with no space between them.

    • This reply was modified 1 year, 2 months ago by tyronere. Reason: URL changed
    September 5, 2023 at 3:15 pm #1418159
    Nikko

    Hi tyronere,

    The link you gave shows:
    Nothing Found
    Sorry, the post you are looking for is not available. Maybe you want to perform a search?
    Please check.

    Best regards,
    Nikko

    September 5, 2023 at 3:17 pm #1418161
    tyronere

    Hi Nikko

    Sorry, made a URL change.

    The final URL is linked below.

    Thanks

    September 5, 2023 at 4:26 pm #1418177
    Nikko

    Hi tyronere,

    On the Color Section where grey bar is located, please put blocks in Custom CSS Class (located in Advanced > Developer Settings).
    And add this CSS code in Enfold > General Styling > Quick CSS:

    #top .blocks .flex_column_table {
    display: flex;
}

#top .blocks .flex_column_table .flex_column:nth-child(2) {
    margin-right: 30px;
}

    Just adjust the margin-right value.
    Hope this helps.

    Best regards,
    Nikko

    September 11, 2023 at 5:22 pm #1418776
    tyronere

    Thanks Nikko. I’ll give this a try.

    September 12, 2023 at 1:55 am #1418816
    Nikko

    Hi tyronere,

    You’re welcome :)
    Just let us know how it goes.

    Best regards,
    Nikko

    September 12, 2023 at 1:01 pm #1418886
    Guenni007

    or use the grid-row :

    very comfortable even in responsive case – you can decide to have the text for the left cell on top and for the right cell vice versa etc. pp.
    To create a non-fullwidth element for the grid-row could be reached easy.

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