Widget/Row Width

I can’t seem to get the width of my widgets/row’s to be the full width of the page. The instructions on the documentation page advise you how, but it seems to be that the lastest Page Builder doesn’t seem to give me the option. Anybody come accross this?

What I have:

What I want:

Hello,

Can you please provide a link to your website to let me inspect it?

Kind Regards, Roman.

Hello there,

the website is:

http://ukpilatesacademy-spain.com/

I have a coming soon plugin installed so you need to be logged in to view the website. I have set you up an account with Subscriber permissions. The login details are:

u/n: athemes
p/w: lsdkgmas;lrkgna;rlgkn

Hello,

It looks like you have already stretched these elements.

Do you still need help?

Kind Regards, Roman.

Ahhh yes I did actually manage to find it in the end - when I wasn’t looking for it, funny enough.

Actually I’m having a bit of trouble with the amount of space underneath all the Rows. It is most noticable down by the footer. I have set the ‘space beneath rows’ to 0px but it doesn’t seem to be working.

Any ideas?

Thanks very much,

Hello,

I’m not sure what space you are referring to.

Can you please provide some explanatory screenshots with highlighted space that you want to remove/reduce?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hi there, Yes please see the screenshots below. Thanks for your help.

I have (very badly) highlighted the extra space in red.

Here is a screenshot on my media library.

Hello,

Please try to use the following CSS code to remove that space.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

#pgc-4-2-0 {
    padding-bottom: 0 !important;
}

#footer {
    padding-top: 0 !important;
}

footer.footer-basic-centered {
    margin-top: 0 !important;
}

Also you can use this in order to stretch the last dark footer row:

footer#footer > div.site-info.row {
    max-width: 100%;
}

footer#footer > div.site-info.row > div {
    padding-left: 0;
    padding-right: 0;
}

Kind Regards, Roman.

Thank you so much, you’ve been so helpful so far.

This issue still seems to be happening? I’ve attached a linked to a screenshot below.

Also, would you happen to know how to could attached the websites title over the large header images? I’ve attached a link to what I mean below.

Thank you so much.

Hello,

1. Please try to replace #pgc-4-2-0 with #pgc-4-1-0 in the code above.

2. It looks like your second issue requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Hi, thank you for help again.

Back to the spacing issue I was having earlier. I have done all that you suggest, but I still can’t seem to get lessen the amount of space under each row. The amount of space under each row seems to be just a little too much, making the page looking unnecessarily spaced out. I have attached a screenshot of the space, and also one of the ‘Edit’ page.
Please note that I have zoomed out using Chrome to fit what I mean in.

Thanks again.

Hello,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

div.panel-grid > div.panel-grid-cell {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

Kind Regards, Roman.

Thanks very much. 1 last question.

In the section at the bottom of the page, the Email us link isn’t aligned with the ‘Got a Question’ text. Any idea how to correct this?

Thanks,

Hello,

You have this custom CSS rule on the 30th row in Simple Custom CSS plugin:

h4 { 
  padding-top: 20px;
  padding-bottom: 2px;
  text-transform:none;
}

The padding-top: 20px; part is causing that problem.

By the way, WordPress 4.7 introduced its own custom CSS functionality, now you can add CSS code in DashboardAppearanceCustomizeAdditional CSS.

Kind Regards, Roman.