Home Forums Polyclinic CSS Cascade is different in release 1.7.1

Viewing 6 posts - 11 through 16 (of 16 total)
  • Author
    Posts
  • #20035

    Oliver Juhas
    Keymaster

    Also, this might help: could you please check your Beaver Builder global settings? Here are values preset/recommended by the theme:

    (And these values actually affect the “Beaver Builder global styles” I mean.)

    Best regards,

    Oliver Juhas
    WebMan Design

    #20036

    Oliver Juhas
    Keymaster

    By the way, great job on your website! Totally accessible :)

    Best regards,

    Oliver Juhas
    WebMan Design

    #20037

    Oliver Juhas
    Keymaster

    I’ve went ahead and tried to deduct what you experience as an issue and I’ve found this code in your custom CSS:

    .fl-module .fl-module-content {
    	margin-left: 0px;
    	margin-right: 0px;
    }

    Please note that with that code you override Beaver Builder global reset styles and make your website content wider. Please try to remove that code to see if your issue is resolved.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20038

    aisdwebservices
    Participant

    Thanks, Oliver, for digging into this with us. and the compliment. We take the accessibility of our site very seriously which was one factor in choosing your theme in the first place.

    After your explanation about the “dev” styles, I remembered that we had turned on debug mode (with logging only) a couple of weeks ago because of a plugin issue. I’ve turned that off and I am using the minified stylesheet now. Your theme appears to be functioning properly in this regard. No need to dig any further with that. Actually, a rather ingenious way to develop, so kudos to you.

    ————————————————–

    I had been trying different code sets to rectify the bottom-margin issue we were having and that custom code you reference above was left over from that. It wasn’t actually doing anything because I had set the “Global Styles” for module margin back to 0.

    Our current custom CSS solution, giving all modules 30px of bottom margin (see ex.1), was to not have to do this on individual modules but still have the ability to override that in the module settings itself because of the cascade. Beaver Builder uses “.fl-module-content” alone to set its margin per module and we could set that to 0px in the module settings, for example, and override our custom CSS in unique cases. This solution works for us because we have 80+ people with varying skills creating content/layouts and I can set the default in a stylesheet so they don’t have to worry about it.

    Example 1:

    .fl-module-content {
         margin-bottom: 30px;
    }

    My current fix is to just comment the offending code out in the parent theme (not ideal, I know) but it appears to be my only solution for now. It’s the only style I must do this for so I think I will just have to handle it this way until I can do a larger CSS audit to bring us more in line with the updates.

    I really appreciate your expertise on this. I’m just about to be on vacation for a few weeks so I’m going to leave this as it is and come back to it afterward. I may be asking questions again then but I think I understand where your development (and Beaver Builder’s) is going and how I need to change accordingly.

    Thanks again.

    Greg

    #20040

    Oliver Juhas
    Keymaster

    Hi Greg,

    Have a great vacation, Greg! In case of any questions, don’t hesitate to reply to this support ticket. I will leave it unresolved for the time being.

    I had set the “Global Styles” for module margin back to 0.

    Please note that this will most likely break things in current Beaver Builder layout. Beaver Builder uses module margins as separator space. The theme was not using those previously (were set to 0), so I’m to blame here.

    But I’ve updated the theme styles so it keeps the Beaver Builder layout/spacing the same (or as similar as previously as you can see on theme demo website), while it uses more future-proof styling in case there is some other significant update to BB in the future.

    Our current custom CSS solution, giving all modules 30px of bottom margin (see ex.1), was to not have to do this on individual modules but still have the ability to override that in the module settings itself because of the cascade.

    Current theme styling keeps the horizontal module margins intact in Polyclinic theme. These margins keep the horizontal spacing/separation from column edges.
    I’m zero-ing out the vertical module margin (styles applied on .fl-module .fl-module-content selector) as by default there is enough vertical padding applied on columns in Polyclinic.

    However, if you want to separate modules vertically automatically, you can try this custom CSS:

    .fl-module + .fl-module .fl-module-content {
    	margin-top: 30px;
    }

    But I can see now that you are actually removing the padding from the column…

    So, I’m a bit confused about the issue now. If you want to zero-out the module margins just like they were before, you can simply use this custom CSS:

    .fl-module .fl-module-content {
    	margin: 0;
    }

    This CSS is compatible with custom Beaver Builder margins you apply on a specific module in your layout too.

    My current fix is to just comment the offending code out in the parent theme (not ideal, I know) but it appears to be my only solution for now.

    What code is actually offending your custom implementation? You could override it rather than edit core theme files.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20041

    Oliver Juhas
    Keymaster

    Also, do you maybe have a screenshot of how your website looked before (where I can compare with the current state to see the problem)? Or can you set the website to its previous state (just downgrading Beaver Builder and Polyclinic theme)?

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 6 posts - 11 through 16 (of 16 total)

You must be logged in to reply to this topic.