Creating Gaps Between in an Inner Column elements

This topic has 10 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Rose Tyler

  • Avatar: Merin
    Merin
    Participant
    November 25, 2024 at 07:32

    https://anandk60.sg-host.com/all-departments/

    On this page, elements are displayed as boxes. These are placed within an inner column. How to create gaps in between these boxes.

    9 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 25, 2024 at 10:32

    Hello, Merin,

    We’ve changed:

    .active-block:hover {
        background-color: #b4e5f4;
    }
    .active-block{
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        border-radius: 30px;
    }

    to https://prnt.sc/reaP4n_G8kJ7

    .active-block .vc_column-inner > .wpb_wrapper {    
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        border-radius: 30px;
    }
    .active-block .vc_column-inner:hover > .wpb_wrapper {
        background-color: #b4e5f4;
    }

    to get the next result – https://prnt.sc/OfjmCHtGaiDW

    Best Regards,
    8Theme’s Team

    Avatar: Merin
    Merin
    Participant
    November 25, 2024 at 11:27

    This is working. But we are facing an issue with height of boxes. Box height changes when their content varies in length. Please provide a solution

    Files is visible for topic creator and
    support staff only.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 25, 2024 at 11:42

    Hello, Merin,

    You’re welcome!

    Please try to use this code:

    .active-block .vc_column-inner > .wpb_wrapper {
        min-height: -webkit-fill-available;
    }

    Best Regards,
    8Theme’s Team

    Avatar: Merin
    Merin
    Participant
    November 26, 2024 at 06:51

    Dear support team,
    How to adjust the size of each box to make them smaller than the current dimensions. I need the small sized boxes. How to do it.

    Files is visible for topic creator and
    support staff only.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 26, 2024 at 10:19

    Hello,

    We hope this message finds you well.

    It seems that the page URL has been changed. Could you kindly provide us with the updated URL at your earliest convenience?

    Thank you for your attention to this matter.

    Best Regards,
    8Theme’s Team

    Avatar: Merin
    Merin
    Participant
    November 26, 2024 at 11:45
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 26, 2024 at 13:58

    Hello, Merin,

    We appreciate your prompt response.

    You can change the gap here https://prnt.sc/HE0dlU46xF_I to get https://prnt.sc/DL_ueLtrBJ0r or https://prnt.sc/w1RdXbm7Ig_C > https://prnt.sc/gbP0aFUpw0TB

    Best Regards,
    8Theme’s Team

    Avatar: Merin
    Merin
    Participant
    November 27, 2024 at 05:48

    Dear team,
    I encountered an issue following these steps: when a text box contains two lines, its size differs from a box with one line of text. How can I ensure that all the boxes remain the same size? In the screenshot i need the first row boxes sizes in all the boxes.

    Files is visible for topic creator and
    support staff only.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 27, 2024 at 10:32

    Hello, Merin,

    https://prnt.sc/bRgXkxYHdSzE – you can edit this code, and set the min-height in px, for example 300px;

    Best Regards,
    8Theme’s Team

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.