Column width issue

  • Hey guys and gals,
    Really stuck on an issue to do with Columns and I apologise in advance as it is a freakin’ long one. I have a row of x 4 columns on my website that I have created to sell my products. So far I am happy with the layout and I have managed to add a hover effect to each of the columns which I think looks pretty affective. (please see here).

    In order to achieve the hover effect I have add the following code using CSS – e.g. – 

    .fl-builder-content .fl-node-5721901c4c48b .fl-col-content {
    border-style: solid;
    border-color: #aaaaaa;
    border-color: rgba(170,170,170, 1);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px!important;
    border-right-width: 1px!important;
    margin-right: 15px!important;
    margin-left: 15px!important;
    margin-bottom: 15px!important;
    margin-top: 15px!important;
    box-shadow: 1px 1px 5px #888888;
}

    This has worked perfectly, however I have had to add a “.fl-node-#” for each of the items that I would like to have the effect on, which is getting really messy not to mention if the “.fl-node-#” changes it stops working.

    So today I decided to try an different approach and added a “class” to the column settings for each row. Then simply adding the code once to change any of the columns with that class. e.g. –

    .in2drums-display-row {
    border-color: #aaaaaa;
    border-color: rgba(170,170,170, 1);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px!important;
    border-right-width: 1px!important;
    box-shadow: 1px 1px 5px #888888;
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-top: 15px !important;
    margin-bottom : 15px !important;
}

.in2drums-display-row:hover {
    box-shadow: 3px 3px 10px #888888;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 10px !important;
    margin-bottom : 10px !important;
 
}

    This has worked to a certain degree. However as this css targets the entire column, it is using the full 25% of each column on the page. Then once the margin is added the 4th column is now shifted below. (please see here)

    I have tried to force the rows to be 23% in the BeaverBuilder settings but it keeps placing the extra space in the next column. I also tried to add the “width: 23% !important;” to the css which worked for the desktop but the columns were then off centre and when the page was viewed on an mobile the columns were compressed to the 23% of the left side of the screen.

    So, any help on how I could get around this would be GREATLY appreciated.

    Thanks and sorry for the very long winded question.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi blueflamman,

    If you intend to use the hover effect on all .fl-node-# columns, irrespective of the number, you could use the CSS [class*=] selector – for example:

    Set a background color on all <div> elements that have a class attribute value containing “test”:

    div[class*="test"] {
    background: #ffff00;
}

    Hope, this helps.

    Thread Starter blueflamman

    (@blueflamman)

    Thanks so much for your reply and please excuse my ignorance as I’m still trying to get my head around this coding. But how would this differ from what I have already done and how would you suggest I apply it using the CSS I have placed above?

    Again thanks and sorry for my ignorance.

    No worries, blueflamman.
    The difference to what you have done is that you don’t need to know the number of the .fl-node-#.

    In you case, assuming that the .fl-builder-content is inside a <div> and you want to style every .fl-node-# the same way, you could use the following code:

    div[class*="node"] {
    border-style: solid;
    border-color: #aaaaaa;
    border-color: rgba(170,170,170, 1);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px!important;
    border-right-width: 1px!important;
    margin-right: 15px!important;
    margin-left: 15px!important;
    margin-bottom: 15px!important;
    margin-top: 15px!important;
    box-shadow: 1px 1px 5px #888888;
}

    Hope, this helps.

    Cheers,
    Kunstwerck

    Thread Starter blueflamman

    (@blueflamman)

    Thanks again Kunstwerck, I tried your above but it had wrong effect.

    To be honest, I have already achieved the desired result in terms of selecting my content and applying the effect, this is not my issue. My issue is that when it is applied to my columns it pushes the margin out past the 25% of each column. Thus moving the 4th column underneath. Column shifted down

    ipad portrate view - columns pusted left

    I need help to –
    1. Reduce the columns so they fit in a row again while not affecting the mobile single column alignment and resizing.

    2. Make each column centred (not pushed left)

    Again, links to the pages are in above posts.

    • This reply was modified 7 years, 10 months ago by blueflamman.

    Hi blueflamman,

    I believe I found the error.
    You assigned your new .in2drums-display-row class to the wrong div.

    Try the following:

    1. Delete your .in2drums-display-row class from the below div:
      fl-col fl-node-587eed4edfeed fl-col-small in2drums-display-row
    2. Add it to the following container div (which resides inside the above div):
      fl-col-content fl-node-content in2drums-display-row

    This should resolve your issue.

    Thread Starter blueflamman

    (@blueflamman)

    Thanks, I’ll give it go. Again sorry for my ignorance but where can I add it? I just added the previous class under the advanced settings of the module in Beaver Builder, so I’m not sure where to add it.

    Hi blueflamman,

    I don’t know a whole lot about Beaver Builder as I’ve never used it.
    However, you would need to make sure you select the correct module and add your class to the advanced settings of that module.
    In your case, you should make sure you’ve selected the fl-col-content module and not the fl-col module (which was the one you have erroneously assigned your new class to).
    If all fails, I’d suggest contacting Beaver Builder support – they’re the experts and know their system in and out.

    Hope, this was helpful.

    Thread Starter blueflamman

    (@blueflamman)

    No worries. Thanks for you help.

    Thread Starter blueflamman

    (@blueflamman)

    Thanks for your help Kunstwerck I ended up contacting BB Support and the fix was actually pretty simple. As you said (and I thought) I needed to target the “content” not the “column”. So all that was required was to add .in2drums-display-row .fl-col-content to the start of my CSS.

    Again, thanks for taking the time to help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Column width issue’ is closed to new replies.