Spacing in Layout Builder

Hey guys, I could really use some help, I am going to have to start several threads so we can tackle each problem and make it easier for people to search later.

  1. On my homepage I used the Layout Builder widget
    On the top of this section, it says my text and I entered “Meet the photographer”
    Underneath the text is a red line
    Under the red line I used the Sydney FP: Call to action where I put in my Title for the button and the link for the button.

Here is the issue. I really want the top text to have more padding from the top of the background image. I also really need the red line to be centered between the text and the button. I want more space under the text, and less space above the button.

To see it in action please visit eppicmedia.com and look at the homepage.

Hi there,

Please try the CSS code below and put it using Custom CSS plugin:

#pg-186-1 .panel-row-style {
    padding-top: 70px !important;
}
#pg-186-1 .widget-title: {
    padding-bottom: 70px;
}

div#pg-w57f1df8509d67-1 .panel-row-style {
    padding: 0 !important;
}

Let me know how it works.

Regards,
Awan

Thank you for your answer, I got the following results:

using this section of code,

#pg-186-1 .panel-row-style {
padding-top: 35px !important;
}

I was able to make a gap at the top, moving “meet the photographer” to a more desirable location.

The remainder of the code however had no effect. I was not able to remove space between the button and the “meet the photographer” text, nor was I able to add space between Meet the photographer and the red line below it.

I went into:
Page-
All pages-
Home Page-
Then selected the layout builder

I then cleared where I had edited the row to have some padding, removing this and then pasting your whole code again resulted in the same thing, a change to the top (space above the text) but no change with spacing around button or below the text.

Ok lets start over. I removed all of the code for that section:

  1. lets try JUST to move the button padding so that it moves closer to the “title” text in the section

  2. the red line is what separates the title text from the content text, I do not use content text here, so if we can remove the place holder for it, I think that will help with question 1 (moving the button padding so they are closer together)
    I think it will also help us in finding the right code to add padding to the “title” text’s bottom so we can move the red line down

Please advise!

Hi,

Sorry for the delay. I just checked your site again and looks like you’ve removed the button widget and re-add it again (I notice the element ID of the button widget was changed).

Anyway, please remove the CSS code in above and change it with this code below:

#pg-186-1 .widget-title {
    margin-bottom: 10px;
}

Hope it helps.

Regards,
Awan

Yes that worked! is there any way to add some space between the title text (Meet the photographer) and the line break? (the red line) Maybe 5 more PX would be enough…I know im OCD sorry.

Hi @eppicmedia,

Yes, you can add this:

#pg-186-1 .widget-title:after {
    top: 55px;
}

Regards,
Awan