Beaver Builder and full width page

[hma]

Hello,
I will try to combine the best page builder with the best them I found 🙂
They are compatible. I can use the builder with Kleo….
However the page doesn’t come full width.
I have been given a line of code from Beavers’ support, However I need to find out the css class of Kelo fro full width.
See hereby , explanation frm beaver :

A full width row is a row that spans the entire width of the page from edge to edge. Creating a full with row is easy to accomplish through the row settings by changing the Width setting to Full Width. When using the Beaver Builder theme, this change should happen without any additional work on your part. If using a third party theme, you may need to add some additional CSS for full width rows to work.

To make full width rows work on a third party theme, you’ll need to make the theme’s content wrapper for builder pages full width. That’s actually pretty easy to do if you know a little CSS since every builder page gets a classname on the body called .fl-builder. Here’s how…

1. Find the id or classname of your theme’s content wrapper (e.g. #content).

2. Target the content wrapper for builder pages and make it full width by adding the following CSS where #content is the selector for your content wrapper…

.fl-builder #content {
width: auto;
}

Can you help me puting the riht term in this CCS that will work for Kleo ?
Best regards,
Hervé

[Laura]

Hello, try with #main
If not just share a link and i will check it out 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hma]

This reply has been set as private.

[Laura]

Hello, this should make it full width, please add it to style.css or quick css in child theme

COPY CODE

.fl-builder #main-container.container {
    max-width: 100% !important;
    width: 1600px;
    margin: 0px !important;
    padding: 0px !important;
}
.fl-row-bg-video .fl-bg-video video {
    bottom: 0;
    left: 0px;
    position: absolute;
    right: 0;
    top: 0px;
    width: 100% !important;
    height: auto !important;
}
.fl-builder .wrap-content {
    margin-top: -40px;
}
.fl-row-fixed-width {
    max-width: 1400px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hma]

Thank you very much Laura.
This is indeed working beautifully ! 🙂
My very nest regards;
Hervé

[hma]

Sorry Laura,
there is A couple of pixel on the left… they are doing a white bar on the left…
see attached.
Best regards,
Hervé

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please add this

COPY CODE

.fl-builder .wrap-content {
    margin-left: -1px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hma]

Hello Laura,
working fine.
Thank you,
hervé

[hma]

Hi Laura,
The solution is working fine on my laptop 14.
But yesterday, I used a 23 screen, and I have a white space especailly at the right of the screen.
How can I fix this ?
Best regards,
Herve

[Laura]

Hello, can you specify screen size in pixels?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[hma]

Hello Laura,
I presume the screen needs to be full size up to :

1200 px 1920 px
and
1440 px 2560 px

Best regards,
Hervé

[Laura]

Hello, i no longer see the page i edited, let me know where is the issue, maybe a screenshot? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts