White space to the right of header and sloppiness

[klaconcepts]

Hi all, I hope you can help, I am struggling with something weird and hope you can help. I am working on this site http://gutlevelnutrition.com/ and there is white space to the right of the header, menu and slideshow. I cannot figure out what is causing it. It is also causing the site to be a little sloppy on tablets and phones. Usually when this happens the header image is pushing the site out too wide, but i removed the header image and that did not help. i cannot seem to fix it. I tried removing all my customizations, the slideshow, but nothing seems to work. It does not seem to be the header. Any ideas?

Thank you!

[Pakban]

Hi,

If possible, can you take a screenshot (using Snipping Tool for example), and then using Paint program highlight the area you are talking about. That would make things easier for us.

Cheers,
Arslan Farooq

[scrambler]

The error comes from what you did with the Bottom part of the footer.
You made it 100% wide, but forgot to remove the left padding on the #site-info container, which makes it extend past the wrapper and cause a horizontal scroll bar.

You need to add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box
#site-info {padding-left:0;}

But you have a larger problem.

The structure of your site is broken as the bottom part of the footer appears to be outside the footer when it should be inside.

This indicates that you probably have some bad HTML in your footer content with probably an unclosed <div>, that breaks the layout.

You need to find it and fix it, or you could end up with some weird problems on some browsers

A quick look shows some useless div and an extra closing div in the first widget of the footer widget area (in yellow below) that could be responsible, but there may be more.

Run all your widget content through an HTML validator

I had a quick look and it looks like you have an extra closing div (</div>) at the end of the lst widget in the footer widget area (in yellow)

<script type=”text/javascript” src=”http://app.getresponse.com/view_webform.js?wid=12196502&mg_param1=1&u=BBRwr”></script>
</div>
But I just had a quick look, so do check all the widgets to be sure

[klaconcepts]

Thank you @scrambler. The padding fixed the issue. i will look more into the footer too, thank you for catching that. It was code copied over from getresponse. I didn’t think to double check it. 

[barbeluk1]

Nice looking site 🙂

How did you achieve the separate floating boxes on the homepage?

Regards,

Andy 

[klaconcepts]

Hey @barbeluk1 I used a plugin called beaver builder. I made all the content area transparent in weaver and then set that each content block in the builder should have a cream background.

[Author]

Posts