Browser Compatibility - 1st Homepage Widget Top Margin

I’m using the call to action as my first homepage widget without the header image. The widget is looking fine on Chrome, but the text is starting underneath the header on Safari and Firefox. I tried adding a margin-top on .action-text and padding on .call-to-action, but that didn’t fix it.

Here’s what it looks like:

Chrome: https://www.dropbox.com/s/hlje0oizue6l4p2/2014%2011%2006%20chrome.png?dl=0
Safari: https://www.dropbox.com/s/ktu1r0yphzxz2vf/2014%2011%2006%20safari.png?dl=0
Firefox: https://www.dropbox.com/s/xa5b520z8pciurw/2014%2011%2006%20firefox.png?dl=0

The Chrome view in the Customize screen looks like the Safari and Firefox views too.

Other browser variations aren’t a big deal, but this one is affecting the first impression and the initial messaging, so I’d love to find a fix.

Suggestions?

Could you post a link to your website?

Staging the site at http://amc3.webfactional.com/courageous

The mobile view has similar spacing, so now I’m wondering if Chrome is the anomaly.

Just wanted to confirm that it’s the bug I knew about. It’s also happening in Chrome, you probably have some cache issues. I slipped this bug in the last version and it was fixed in the new version that we’ll release tomorrow.

Are you handy with CSS?
This is how you would fix it until the new version is ready:

  • Open up style.css
  • search for .sticky-wrapper, find this and delete it:

.sticky-wrapper {
   height: 100% !important;
}

  • search for width: 100% !important; and you’ll find this:

.container {
  width: 100% !important;	
}

  • replace 100% with auto in the above code.

Make sure you don’t have cache issues anymore and let me know how it goes.

It’s a relief to know it’s a bug.

Since I’m using a child theme, not sure what to do with deleting sticky-wrapper. Is it worth changing .container width without deleting .sticky-wrapper height?

Any advice on caching. I’ve disabled all caching plugins, disabled caching in browsers that offer that option, cleared caches all over the place and my changes to the theme still take a while to show up. Chrome is especially frustrating.

Nope, sticky-wrapper is causing the bug so it need to be removed. You can simply delete it from the parent since the update will also do exactly that.

Not sure what’s wrong with your setup, I usually just delete the cache when I have issues.

I made the changes.

Firefox is looking good. :slight_smile:

Chrome is still looking fine on the live side and strange on the Customize side, but that could be my cache issue.

Safari added a ton of white space between the header and the first widget, like it is saving space for the header image.

Have you replaced 100% with auto in the container? Or maybe you’re having cache issues on Safari too. It’s looking fine on my end, though I have an old version of Safari.

Safari’s looking better after I restarted it. I guess it was a cache issue even though I had deleted cookies and the cache. ad;ladkfjf

I still need to test the mobile view.

Thanks for your help.