Fullwidth Problem with PageBuilder Blocks

Hello,

When I split a block in two parts, it sets automatically in fullwith… And I don’t want that. If I don’t split the block, it stays normal !

You can see it on this page : http://frantzimages.fr/index.php/contact/

Thank you for helping :slight_smile: Seb

Hi Seb,

I notice that you area using “Front page” template for that page, Please try to change the page template and let me know if it can fix your issue.

Regards,
Awan

Hello Awan,

Thank you for answering ! Yes I’m using “Front page” template beacause it’s what I want !

The problem is the same on the front page !

Seb :slight_smile:

Hi,
So, you want to display the contact info and contact form in your front page?if so, the default setting of the theme is displaying the content in full width when you choose page template as “fron page”

But, if the contact page is not for your front page, I suggest you to change the page template to “contact” or “full width” instead.

Regards,
Awan

Dear Awan,

I want the “front page” template on all my website ! I don’t want use the contact form on my front page.

Next, if you go below on this page you can see that it’s not fullwidth if you use only only one row : http://frantzimages.fr/index.php/contact/
One row is not fullwidth, two rows is fullwidth ! Why ?

Thank you :slight_smile: Seb

I see…
I am sorry for the inconvenience, Seb :slight_smile:

I’ve just checked the pagebuilder widget and actually both section (one row and two row) is displaying full width. There is no padding applied for the row, but the padding is applied in the widget.

I am using chrome dev tools to check it. see the pict below:
http://prntscr.com/9y3ko4 I am hovering the row and it displayed in blue color.
http://prntscr.com/9y3lnm Then I am hovering the widget and there is yellow color wrapping the blue color.

http://prntscr.com/9y3mm9 This is the 2nd row and there is blue color only
http://prntscr.com/9y3n53 Hovering to the widget and you’ll see the yellow color and orange color.

If you a developer and familiar with chrome dev tools, you’ll understand that:

  • blue color is the layer
  • yellow color is the padding
  • orange color is the margin.

I hope my explanation not make you confused :smiley:

Thank you for the information but i don’t know anything in code :confused:

So what the solution for you ?

What you say looks weird because i had a fullwidth problem few days ago. I would have like a fullwidth ONE raw style. I opened a post and Kharys brought me a solution :

Seb :wink:

Hmm okay, so I think you want to create one row with two widgets in it but keep only one title displayed in the top with full width, something like this http://prntscr.com/9ybqm5?

Hello Awan,
I want one row with 2 widgets but NOT displayed fullwidth !!

Imgur

thank you ! Seb :slight_smile:

Oh I see, thank you for the illustration pict, now I can understand your question as well :stuck_out_tongue:

Okay, with your front-page template for your page, you can centering your widgets using following css code:

@media (min-width: 992px){
  body{ 
     background: white; 
  }
  .site-content {
    padding-left: 150px;
    padding-right: 150px;
  }
}

you can put the css code in your child theme or using simple custom css plugin

Hello Awan,

Thank you, it works but it’s not what I want ! Because ALL the row are set with the padding and I don’t want padding for several rows !

Why with only one widget in the row, it’s normal ? I mean “not fullwidth” !

If you see theme PERTH, it works well ! Maybe it could help you ! i use PERTH for another website

Seb :slight_smile:

Okay, so my question is not answering your issue yet.

Trying to figuring out what you want, I take these two screen shot from perth theme and moesia theme. both is using front-page template
Perth:

Moesia with my custom css code:

From both images in above, can you tell me how the page should displayed?

I’ve created a page on my website (where I use Perth) and I’ve created exactly the same thing I want : 1 raw split in 2 !

http://sebastienproust.com/test/

As you can see, the first line is not fullwidth as Moesia ! For me it’s a bug of Moesia which needs to be corrected !

Thank you for help ! Seb

Hello Seb,

Thank you for the hints.
Okay, to make the specific row displayed in full width and keep the content in center, please try this css code below but firstly you have to get the row ID for which you want to apply this css code.

#pg-2548-0 {
    max-width: 1170px;
    margin-left: auto !important;
    margin-right: auto !important;
}

Using chrome dev tools, you can get the row ID by inspect the HTML element which has panel-grid class. From this screenshot you can see that the ID for the row is pg-2548-0

Hello Awan,

Congratulation !! You’ve finally found the solution :slight_smile: Thank you a lot !

Just a little question before close this post !

Is there a way to create the solution as a CLASS like here : https://athemes.com/forums/topic/fullwidth-pagebuilder-blocks/

I think it’s smater ! Do you ?

One more time, thank you :slight_smile: Seb

Yes, the steps is similar with the instruction from Kharis.

You can create a class name to the row from: Edit Row > Row Styles > Attributes > Row Class, e.g: custom-row then use simple custom css plugin to put the css code:

.custom-row {
    max-width: 1170px;
    margin-left: auto !important;
    margin-right: auto !important;
}

Thank you Awan !!! It’s definitely done ! Very good job :slight_smile:

Seb

Hello Awan,

Finally your solution has a little problem ! When I try to apply a background color on the row, it doesn’t work well ! Let’s see on the following link :

http://frantzimages.fr/index.php/contact/

Thank you for help :slight_smile: Seb

Hi,

Yes, there would be a problem when you put a background color / image to the row. But I hope these css code can fix this:

div#pg-2548-1 {
    background-color: #3f3f3f;
}

Please not, I am using the ID of the section pg-2548-1, So if you remove the existing row and add the another one, you have to get those section ID again.

Very good Awan ! thank you very much :slight_smile:

Seb