CSS flexbox properties not loading in header

Support
#1

Hi,

I have used the “Starter: Hero” header template to create a new header for my homepage. I haven’t changed much so far other than some color and other style-related settings, plus changing the default hero text. Most of the elements I have left as they are.

My problem is that the header appears correctly when I’m editing it in Pro, but when I view it on the site, it doesn’t look right. In troubleshooting, I noticed that some of the CSS flexbox properties such as “flex-direction” and “justify-content” aren’t being applied to the elements and containers.

Steps I have taken to try and resolve this:

  1. Disabled all plugins on the site.
  2. Changed the active theme from Pro Child to Pro parent theme.
  3. Assigned the header globally rather than just to the homepage.
  4. Tried changing the homepage’s container/layout setting to a few different options (“No Container | Header, No Footer”, “No Container | No Footer, Header”, etc.).

Information about my site:

WordPress version: 4.9.8
Pro version: 2.2.5
PHP version: 7.1.6
Active theme: Pro child theme

Can you please take a look to see why this is happening? I will post WordPress login info in a secure note.

Thank you,
Ben

#2

Also worth noting that no JavaScript errors appear in my browser console when loading the homepage.

UPDATE: It seems that this issue goes beyond just headers. I’m currently editing the homepage content, and I have a Headline element that is displaying in a different color and font size than it is in the Pro editor.

If this could possibly be a contributor as well, this site was using X initially, and I upgraded to Pro and went through the conversion process.

I have gone to Pro > Settings > Clear Style Cache and cleared the style cache. Had no effect.

#3

Hi Ben,

Thank you for writing in and sorry to hear that you’re having that issue, did this issue happen right after you migrated the site to your dev domain?

Try installing Transient Cleaner then, Remove all expired transients, and Remove all transients

Let us know how it goes,
Cheers!

#4

Hi friech,

Thank you for the suggestion. I installed the plugin and removed all transients, then cleared the Pro style cache, and then cleared my browser cache, but the issues still remain.

To clarify, this site wasn’t migrated from anywhere. It is a fresh installation that I set up on this domain. I did initially have X installed, though, and then upgraded/converted to Pro.

#5

Hi @excaltech,

That is so strange! I added a new header and this is happening for the new header too. I checked 3 different installations both on my local machine and online and could not recreate the problem you are experiencing.

The only suggestion that I can give is that try to re-install the Pro theme. Make a back up of your website then delete the Pro theme and install it again.

Then follow the troubleshooting steps below:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  5. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.
  6. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.

Another point is that try to install a new version of the WordPress and see if the problem persists with Pro, if yes it will show there s something related to the server you are using, but if no it shows there is something up with the database of your website.

Thank you.

#6

Hi Christopher,

I have done everything you suggested, but nothing has worked. I even set up a fresh install of WordPress at http://webreview.excaltech.com/excaltech/. With this install, I literally just installed WordPress, deleted all plugins, and installed Pro. Nothing else, other than increasing the PHP memory limit to the recommended 512 MB (which I must say I find outrageous).

Another point worth mentioning is that I have a client site on this same server running X (https://www.maddash.com) without any issues. I understand that Pro is not X, but so much of it is the same or very similar, so I don’t think there is any issue with the server. If you think it is an issue with the server, though, what would your guess or suggestion be?

The server is Windows running IIS. Does Pro use any PHP functions or anything else that have known compatibility issues? Again, I’ll point out that X seems to be fine on this server.

Thanks,
Ben

#7

Hello Ben,

Would you mind providing us the ftp login credentials so we can take a closer look and fix the issue?

To do this, you can make a post with the following info:

  • FTP Hostname
  • FTP Username
  • FTP Password

Thank you.

#8

Hi RueNel,

Yes, I will provide in a secure note. Thank you.

#9

Hey Ben,

Currently, going anywhere with Pro’s interface returns a 500 server error so I enabled debugging to see the actual error (see secure note). I’m not familiar with Windows IIS server so please contact your host if they could trace the cause of the error.

Also, please try the following:

  1. Try upgrading to PHP 7.2 and if that does not work, try downgrading to PHP 5.6. You might need the help of your host for this.
  2. Re-install Pro.

Once this issue is fixed, we can continue on your original issue.

Thanks.

#10

Christian,

Did you modify some code in Pro? This wasn’t happening as of my last post.

My company is the host. The server doesn’t yet have PHP 7.2 installed. Although I could install it, I tried changing PHP on the site to 7.1, 7.0, and 5.6, but none of these made a difference.

Also, you’ll see from one of my previous comments that I’ve already tried re-installing Pro, as well as installing Pro on a fresh installation of WordPress.

I really need your help troubleshooting this. I’ve looked at the line of code where the error is being produced, but I’m not familiar with your theme’s code and what other code the erroneous line is causing to execute. You guys are. Please help me here. I’m on a very tight deadline, and if this can’t be resolved in the next couple days, I’ll have no choice but to go with a different theme.

You guys have been great so far in your responsiveness, especially considering it’s the weekend, and I really appreciate that. Unfortunately, I just am at a point where I can’t wait much longer to get this fixed. I do want to be able to use Pro, but this issue is beyond me right now.

Thanks,
Ben

#11

Hey Ben,

No. I haven’t got a chance to edit anything because of that error. We’ll continue checking what’s causing the issue.

Please stay tuned.

#12

Thank you, Christian. I went ahead and installed PHP 7.2.8 to see if this makes any difference, but the same error is still produced. For the time being I have left this as the site’s version of PHP.

#13

Hi Ben,

I tried the same version but can’t replicate the issue and you have mentioned that you have tried the following version 7.1, 7.0, and 5.6, but none of these made a difference.

The last resort would be to transfer to a linux server rather than a windows server.

I will also forward this to our web development team for review and see what they can find.

Thanks

#14

Hi Paul,

I appreciate you forwarding this to your web development team. I’m at a point where I must keep moving on this project, so I have copied this site to a new location that your team can continue to use for troubleshooting. I will update the WP and FTP info in a secure note.

Thanks,
Ben

#15

Hey @excaltech,

I investigated deeper and in the process, I’ve tried reinstalling Pro again and I got this error:

I get the same result when installing X so I tried installing a third party theme for testing and I get this:

This tells us there’s something wrong with your server and/or WordPress setup. It could be related to your permissions that are not setup properly. It’s currently blank.

You will need to fix that. Maybe this guide might help.

Regretfully, we are not the right people to fix server related issues and making Pro work with non-standard server and/or WordPress setup is not feasible. I hope you’ll understand that it would require hours of custom work. I personally did spend a long time to figure this out but to no avail.

I’d recommend that you move to a standard setup. X and Pro works out of the box in most web host.

Thanks.

#16

Sorry Christian. The domain I moved the site to is one that I hadn’t been using, and I didn’t realize that the permissions on the site were read-only.

So here’s the odd part: I reinstalled Pro, and the issues don’t seem to be present anymore. Very strange…

I understand regarding not being able to investigate further. Thank you very much to you and everyone else who contributed to investigating this.

Ben

#17

Hey There,

You are most welcome. We’re just glad we were able to help you out in anyway we can.
It’s good to know that the issues is no longer present after you have re installed Pro theme.

Best Regards.

#18

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