Front page issues

Hello!

I created a row on the front page, below the header. Now there’s a lot of white space between the header and the row, as well as the content.


How do I eliminate the white space?

Image attached. Website is http://samsliquors.com/

Thank you,
Eva

Hello Eva,

That excessive spaces are actually row padding which is set to 100px for top and bottom by default. You should set it to 0. In page builder, edit that row, under Row Styles, expand the Layout tab. Then set 0 (zero) for “Top/bottom padding”.

Regards,
Kharis

Hi Kharis,

Thanks for the prompt response!

I tried that and it fixed one of the problems - the spacing between the header and widget title. However, the spacing between the widget title and the widget is still off. See image.

Thank you,
Eva

Hello Eva,

You can also use CSS code to manage style specific of row element. In your case, you’ll use this code:

    #pg-w5a4322c1e0ef8-0 > .panel-row-style {
      padding-top: 50px !important;
      padding-bottom: 0 !important;
    } 

To apply it to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Hi Kharis,

That worked! Any chance you could explain why that was an issue and what the coding means? Just trying to figure out what to do in case this happens again with another row.

Appreciate it!

That CSS code is aimed to against inline CSS style produced by page builder. #pg-w5a4322c1e0ef8-0 is actually a unique ID name of an element that wraps the row; inside it, there’s an element that has .panel-row-style class name where all row styles configurations are attributed to. For other row, you should duplicate that CSS code and adjust the ID name, which can be found by inspecting it with the web browser’s inspector tool. https://www.lifewire.com/get-inspect-element-tool-for-browser-756549

Regards,
Kharis

Hi Kharis,

I’m having the same issue again with the same row… help.

Thank you,
Eva

Nevermind, I found the row title and changed it in the css. Thank you!

Hi Kharis,

Now the next row is giving me trouble. I did what you told me to but it didn’t work. Extra spacing between title and widgets. Here’s the CSS I put in and an image

#pg-w5a445d0ac8c32-0 > .panel-row-style {
  padding-top: 50px !important;
  padding-bottom: 0 !important;
}