Title: Column width issue Last modified: January 18, 2017 --- # Column width issue * [blueflamman](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/) * 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](https://www.in2drums.com/wordpress/lessons)). * 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](https://www.in2drums.com/wordpress/)) * 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. - This topic was modified 9 years, 4 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/). - This topic was modified 9 years, 4 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). Reason: put code in backticks Viewing 9 replies - 1 through 9 (of 9 total) * [wpercom](https://wordpress.org/support/users/kunstwerck/) * (@kunstwerck) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8669806) * 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
elements that have a class attribute value containing “test”: * ``` div[class*="test"] { background: #ffff00; } ``` * Hope, this helps. * Thread Starter [blueflamman](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8669881) * 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. * [wpercom](https://wordpress.org/support/users/kunstwerck/) * (@kunstwerck) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8670292) * 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
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](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8671835) * 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](https://i0.wp.com/dl.dropboxusercontent. com/u/82016514/Columns/Screenshot%202017-01-19%2013.35.15.png?ssl=1) * 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 9 years, 4 months ago by [blueflamman](https://wordpress.org/support/users/blueflamman/). * [wpercom](https://wordpress.org/support/users/kunstwerck/) * (@kunstwerck) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8673154) * 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](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8673269) * 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. * [wpercom](https://wordpress.org/support/users/kunstwerck/) * (@kunstwerck) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8673565) * 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](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8673583) * No worries. Thanks for you help. * Thread Starter [blueflamman](https://wordpress.org/support/users/blueflamman/) * (@blueflamman) * [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8674151) * 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. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 9 replies * 2 participants * Last reply from: [blueflamman](https://wordpress.org/support/users/blueflamman/) * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/column-width-issue-4/#post-8674151) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics