Column Margins not working as expected

  • Resolved rotornut44

    (@rotornut44)


    5 years, 8 months ago

    Hello,
    I have added a CSS drop shadow effect to 3 columns on a page I have been working on. I would like to put some space between these columns so that they aren’t border to border. However, margin spacing is currently acting the same as padding. Instead of the spacing being added outside of the column, it is being added to the inside.

    The row is currently Full Width, however the Content Width is Fixed at 1300px. Changing Content Width to a Full Width layout still gave the same results when playing with the margin. Using the latest lite version of Beaver Builder.

    Here’s an example image: https://i.imgur.com/wOhMFNR.png

    Thanks for your time,
    -Chris

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    5 years, 8 months ago

    Hey Chris,

    Thanks for posting!

    You’ll need to assign your drop shadow style to the child column container like so..

    .shadow > .fl-col-content {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

    The margins and padding are added to that child container. 🙂

    Hope this helps!

    Ben

    Thread Starter rotornut44

    (@rotornut44)

    5 years, 8 months ago

    Hi Ben,
    Thanks for the tip. The shadow now displays on the child column, however it also still displays on the outer column. How would you go about excluding the outer column?

    Edit:
    Disregard. The below CSS did the trick.
    .shadow {box-shadow:none;}

    Thanks!
    -Chris

    • This reply was modified 5 years, 8 months ago by rotornut44.
    • This reply was modified 5 years, 8 months ago by rotornut44.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Column Margins not working as expected’ is closed to new replies.