Website Layout Messed Up

CMS & WordPress
1

Hi Guys,

After WordPress update the website layout is now messed up.

Not sure what has gone wrong at all.

Here is the website: http://www.vipmiamilimo.com

Thanks

2

So FYI I opened that view-source in my browser and I came to this. Near sh** myself.

1876×769 532 KB

First step to debugging that crap should be validating.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vipmiamilimo.com%2F&charset=(detect+automatically)&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.vipmiamilimo.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

I’m crossing my fingers that you have some version control in place… please?

3

This is the reason you always work locally before pushing production changes. Self update is by nature unreliable and can have catastrophic results. What I recommend is to restore the old site than set-up a local environment and debug from there.

4

You should always back up your WordPress site before updating anything (plugins and core WP). Make a backup of both the database, the wp-config.php file and the wp-content folder.

@RyanReese, this code was built by WordPress, not the OP. It looks like he is using some plugin that minifies the html code.

When I view the site, it looks like the style.css file is not being read.

@sookie, make sure the file-path to the style.css file is correct in your header.php.

5

Thanks guys,

I have added an image of what it needs to look like and that’s what it looks like in the dashboard.

1024×492 324 KB

@ RyanReese, I have no version control.

@ Oddz, it’s not possible to restore the website because the guy never did any backups.

6

style.css (21.7 KB)
functions.php (12.4 KB)
home.php (5.7 KB)
page_portfolio.php (3.7 KB)

I have uploaded the files the theme is using.

Thanks Guys

7

Where’s your header.php file?

8

@WebMachine, there is no header.php with this child theme.

Also just to update you guys, this is what I have done:

Cloned the above website to: http://crystal.mozyou.com and as you can see the layout is okay apart from the social icons over lapping, which needs fixing.

The child theme icon is missing as you can see from the attached images

This is what the icon should look like in the dashboard:

What I don’t get is why the layout is appearing okay on: http://crystal.mozyou.com but not on: http://www.vipmiamilimo.com

Thanks guys

9

The main style sheet is being corrupted somehow, with lots of # characters peppered throughout, so the styles are not being read by the browser.

<style> links also shouldn’t have IDs (nothing in the <head> section should use them.

10

style.css (27.5 KB)

The above is the original style sheet which came with the theme before any customizations were done. It also has a lot of # characters.

11

Thanks for your help guys.

Here is another update, I have managed to get the layout sorted out but still need your help with the social icons over lapping in Chrome and Firefox but appearing okay in Internet Explorer.

Thanks guys

12

They look fine to me in Chrome:

13

@ralphm, thanks!

What about in Firefox?

I have cleared my cache but still showing the over lapping.

14

Same in FF. I’m on a Mac.

15

@ralphm, thanks!

I am on Windows but still the social icons are over lapping.

16

Because VMWare Fusion totally sucks these days, I can’t test your site in Windows browsers atm, but anyhow, you do have a bunch of anchor elements sitting sidy by side there, which can be a bit risky, so to make it more bulletproof I recommend you mark them up inside an unordered list. That’s more semantic and more reliable, too.

17

Curious - do you use CloudFare or some caching server software?

I loaded FF and Chrome up on Windows7 and both were perfect.

18

@ralphm, how do I mark them up inside an unordered list?

@RyanReese, yes, Cloudflare is being used. Why?

Thanks guys

19

I’ve had this exact problem. I believe you might be having the same issue.

Load up cloudfare (I assume you use CPANEL and there is a button for it. Once there, look for the “Advanced” link. Then once it loads, scroll down slightly until you see “Purge cache”

Cloudfare is rendering it’s own cached version of your page (different than your browser cache.)

That might possibly be it. I turn it off when I’m making updates to my page since every time I make an update, I have to purge cache so I get a fresh copy of my page.

20

@RyanReese, thanks! I will try that.

In the meantime, may someone please take a screen shot of the website for me? This is what I am seeing now. Thanks

1898×958 113 KB