Major issue with layout and background image stretching entirety of page

Support
#1

Hi,

Today I just finished re-building my entire website from scratch, and only at the end did I suffer an issue, and a big one at that.

I had a slider revolution on my home page, set to full screen, that showed a self hosted mp4 video. This was also perfect. I noticed after a test on GTMetrix that the video was nearly 3mb so decided to create a new video, upload that and then replace the old video on Slider Rev. This is when the problems began.

This is affecting every page. If we take the Testimonials page, there was one section that had a background image, the rest had white backgrounds. This image has stretched the entirety of the page, as well as knocked things out of line or put them in to single columns.

The home page is a complete mess, it’s like the cover image for the slide has stretched the whole way down the page, while the content has for the most part formed in a single column layout.

I really hope someone can help me because I have no clue what to do. My site was backed up this morning before I worked on this site all day. Please can someone track down what the issue here is? I don’t have any caching running currently.
You will need to log in as it’s currently in maintenance mode;

URL - https://www.badwolfproductions.co.uk

Thank you very much,
Mark

#2

To add,

I have already disabled all plugins - no change - cleared Chrome’s cache, tried another browser (IE), and cleared Cloudflare’s cache.

M

#3

Hi Mark,

I would like to check but the login provided doesn’t seem to work.

Kindly check again and let us know.

Thanks

1 Like
#4

Hi Paul,

Please try again, same password.

thanks
Mark

#5

Hi Mark,

Unfortunately the given credentials still do not work.

Regards,

#6

Hi Joao,

I don’t know why, I was able to log in yesterday. Anyway, I updated details in secure note with new username and p/w.

Thanks
M

#7

Hi there,

Are you referring to this image https://www.badwolfproductions.co.uk/wp-content/uploads/2017/10/hand-laptop-notebook-technology.jpg? That isn’t related to the video or slider, there is no slider even on the testimonial page.

May I know how it should be? I can see the image being fullscreen with no white gaps, the only thing I noticed is, its quality is bad since it’s smaller than its container but stretched. Should the background stay on its row instead of fullscreen?

Thanks!

1 Like
#8

Hi Rad,

Sorry the remark about the slider was in reference to the home page, but the same issue is site wide where the majority of the background of every page is made up of 1 image - it might be the one you have linked, it’s too distorted to tell.

On the testimonial’s page, the section that has the embedded video by Peter Meehan was Section 3 of 3, and this was the only section that had the image you linked above, as a background - the rest of the page is all white background. So yes, it should be on that particular row, not full screen.

However I feel like there is something else broken with the site over all - It’s most noticeable on the home page though, much of the content is in a single column layout. You only have to look at the home page to know it looks absolutely terrible and that there is a clear issue. Let me try and break it down for you;

If you visit this full page screen grab - https://i.imgur.com/etreGy6.jpg - hopefully it’s easy enough to see if you zoom in a little.

Section 1 - This is the Slider revolution and is displaying without issue.

Section 2 - One row was in 2 columns - my face and the two social media buttons (that are appearing as coloured squares) should be in the left hand side column, with the text that you see underneath me, being in column 2, on the right hand side. This section should have a completely white background.

Section 3 - These images and text boxes should actually be displaying as 3x rows of 3 icons/text, not a single column with huge icons. This section had an image as a background (I think it was this - https://www.badwolfproductions.co.uk/wp-content/uploads/2017/10/shutterstock_316265210-copy1-1.jpg)

Section 4 - this section exists 3x times in Pro; one for tablet, mobile and desktop. It seems all 3 are displaying right now (this desktop I’m on is 2560x1440). The desktop version is a 2 column setup, here it is displaying as one with everything stacked on top of itself. All versions have a white background, but one seems to have that same background image displaying as before.

Section 5 - These testimonials are displaying correctly, but the background image is missing (https://www.badwolfproductions.co.uk/wp-content/uploads/2017/10/keyboard-coffee.jpg)

Footer - The only part of the page working correctly besides the slider at the top! Note, this was the last thing I edited, bar changing the Slider video, before things went wrong.

Basically the formatting is all off - why are elements out of place, in single columns, and where is that brown background coming from? Whatever it is, is seemingly applying site wide. Everything was absolutely perfect and then suddenly went wrong after altering the slide.
As the site was pretty much complete, I enabled W3 cache, but after the slider issues I cleared the cache then disabled/removed the plugin, so if that was an issue, I don’t believe the problem should continue to exist after it having been removed.

I hope this all made sense.
I would really appreciate any help.

Thank you
Mark

#9

Hi Mark,

I can see the issue. Upon thorough checking, I found that some basic styles specially for section are missing. Stylesheet where this styles are added was cut corrupted. See this: https://screencast-o-matic.com/watch/cbXinn261c.

See the difference on the content of that file and the missing part here: https://screencast-o-matic.com/watch/cbXinX261k

Usually this issue happens if you have set JS and CSS minification to ON. Those files are minified already and minifying it again caused breakage on the file resulting to styling issues. Though when I check, you don’t have any CDN or plugin with minification. This might mean the the theme is corrupted. Would you mind reinstalling PRO theme? Check again after that.

#10

Hi Lely,

Thanks for your reply and thorough investigation.

I’ve noted your screencasts and have attempted a theme re-install with no joy.

I did notice in the first one that although adding position : relative removed the background, there are still elements on there that are incorrect - if you pause your screencast at 0:20 you can see there is a white box in the top right of every testimonial column. Secondly, the author of the testimonial should be above the company name, not below.

I used the file manager on my hosting company’s site and followed the path shown in the URL in your screencast (https://www.badwolfproductions.co.uk/wp-content/themes/pro/framework/css/dist/site/stacks/integrity-light.css), but whether I look at the current stylesheet, or one from 3-4 days ago (i.e. before I reinstalled the theme), they all seem fully completed, and don’t cut off unlike if you visit the above URL?
That doesn’t seem to make sense to me - how can the file contents be different whether I visit the URL or whether I browse to that file via FTP? Surely the contents should be the same as it’s the same file?

I have attached the file for your perusal - https://drive.google.com/open?id=0B41ndbGiyKKbSm94bkZ6TjlYS3M

Would it be worth re-installing the child theme? I didn’t want to risk losing my customisations so haven’t done that yet.

Thanks again
Mark

#11

And just to add, I had a caching plugin installed with minify enabled, but by uninstalling this would this not reset the CSS back to its original form?

I had also mentioned before about a backup restoration for the completed site not being an option, however I do have access to the previous month’s file manager, so if it’s a case of restoring particular individual CSS files, or whatever else, then I can do this.

Just an FYI.

Thanks
M

#12

Hi there,

There is no issue with actual file, the issue is when it’s served and it’s cut. I checked it too and confirmed that it’s being cut. I recommend turning off your CF minification, it should be turned off. And please provide your CF login credentials so we could check if it has correct page rules.

Re-installing will not fix it, as I said, there are no issues with the actual file. The issue is when it’s served by CF.

Plus, if you’ll turn off your Under Costruction plugin and check it here https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.badwolfproductions.co.uk%2F, you’ll see stray errors (elements with no close or opening).

Error: No p element in scope but a p end tag seen.
From line 1640, column 7; to line 1640, column 10
 />↩</div></p>↩</div

Error: End tag a violates nesting rules.
From line 1644, column 19; to line 1644, column 22
ew Project</a>↩↩<sty

Error: No p element in scope but a p end tag seen.
From line 1692, column 7; to line 1692, column 10
 />↩</div></p>↩</div
```

And so on, there are too many and you need to fix them, just ignore other error that aren't related to close/open elements.

With no proper close/open element, it will of course break the structure of your site, including columns and backgrounds.

Thanks!
#13

Hi Rad,

The re-installation of the theme was a suggestion from your colleague, so that’s why I tried it.

Alas, I have found the issue after you mentioning the CF minifying… this is something I had switched on months ago, before I even began a rebuild. I have no idea why it suddenly has played up now, but it has, and unchecking the boxes for JS, CSS and HTML, before purging everything via CF has indeed fixed the issue - thank the lord.

So my apologies, should have checked more thoroughly, but it never even dawned on me until you mentioned it, previously I was just clearing the cache and no more.

Thank you for your support on this, I’ll remember this for next time!

Cheers
Mark

#14

Hi there,

Glad that you have managed to fix the issue. Also, there is a good article that might be helpful for the future references:

https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Thank you.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.