Full Row width using Sydney theme

Beaver Builder
1

Hello,

After searching the forums, unfortunately I was unable to resolve the problem that I encountering (having rows fill the entire page width) using the BB Standard plugin with the Sydney theme. https://wordpress.org/themes/sydney/

As a test that full width rows were possible with the Sydney theme, I used the Free Page Builder by SiteOrigin and was able to achieve the desired results.

I’ve tried:

  • Setting margins to 0 (also padding to 0)
  • Make sure that within the BB module that Rows Setting that both width and content width were set to full width.
  • Changing Page Attribute Template setting.
  • and a various other things that I could locate on the forum.

My website is http://traveldreamscapes.com/. The top slider and footer (both full width) are part the theme.

Though I’ve had some experience with another CMS, I’m new to both WordPress and the BB plugin.

I sincerely appreciate your assistance, and look forward to creating great websites in the future with BB.

Thanks,

Willie

2

Hi Willie,

Can you try adding the following CSS to your custom CSS and let us know if this resolves your issue.

.page .page-wrap .content-wrapper,
.single .page-wrap .content-wrapper {
    padding: 0;
    width: auto;
}

Thanks,
Danny

3

Thanks Danny for the code provided, it works perfectly now.

Thinking forward, did you see something specific in the Sydney template code that lead you to this solution (if so, please share what I should look for, so that I can investigate without troubling you if this happens with another template), or is this a fairly common solution?

Thanks,

Willie

4

Hi Willie,

To quickly identify the issue, you first need to know that as you’re using a third party theme. They will have their own styling for the content area. Usually, a theme will have the option to select either full-width or a fixed width. However, this wasn’t the case for the Sydney theme, unless I missed the option.

So onto how I got that code and made your content area full-width. All I did was inspect your site using Chrome’s dev tools. Then reviewed your sites divs for one that had a specific width and margin applied to it.

In Chrome dev tools, a margin is given an orange color tone and padding is given a green color tone. This allows you to quickly identify and distinguish if the element/div has margin or padding without having to look at the CSS.

Once I found the div, I simply added a new property and added width: auto; and padding:0; and that’s about that.

I recorded myself doing this change. Please, be aware that this is after you have applied the fix. So I had to disable it to show you what I did.

Hope this helps and I would also highly recommend you check out Code Schools free tutorial to Chromes dev tools. You will learn so much from it and become a ninja in no time.

http://discover-devtools.codeschool.com/

Thanks,
Danny

5

Hello Danny,

I sincerely appreciate:

• The clarity of your explanation detailing the steps that you took to troubled shoot my third party template issue.
• Your recording demonstrating the steps taken.
• The suggestions offered on how I can improve my understanding in this area.

Best regards,

Willie

6

No problem, Willie! Happy to help.

Thanks,
Danny