Chrome CSS Issue

[swofford]

I cannot seem to figure this thing out. IE/FF work fine, but chrome is giving me no resolution. I have spent hours and tried just about every which way I can think of. I give up... hopefully someone can help me:)

http://recoverysquared.com

If you notice the right tagline the height is different from the left.

I had to add a bit of custom code from here to enable the right tagline widget.

Here is the code for that: https://gist.github.com/braddalton/6464194

http://recoverysquared.com

[Porter]

The height on the left widget is 256, where as the right widget is 226, so the left is larger than the right. Since the areas start at the top and move down, that's why it's further up, as it's not as tall. I'm not sure what efforts you have in place to give them an equal height / center the text, but at different heights, it appears it's doing what it should. You may want to define a min-height value and see if you can make that work. Not 100% what exactly is happening, but that height differentiation is likely the source of it.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[swofford]

Thanks Porter!

All the heights are set by the responsive design and depends on resolution of the screen. If I put the same content into both left and right I do not have the issue.

All the CSS looks the same from F12. I am out of ideas to try.

[Porter]

I haven't found a perfect fix yet (working on it), but I found the cause. The image (the book on the right) in Chrome is smaller, 164x164px, where as the Firefox image is 300x300px. I changed "auto" to 300px, which obviously distorts the width, but it filled in the space nicely, and aligned everything. That being said, the image is too small on the Chrome version, or too large on the Firefox version - either way, they need to be the same, or the container needs to be the same.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

If you get rid of the following in Chrome, it works:

embed, iframe, img, object, video, .wp-caption {
    max-width: 100%;
}

Simply disabling that line makes it look like Firefox.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[swofford]

Hey thanks again Porter!!! You are awesome!!!

I tried to use the same image on both the left and right and I get the same effect. They are display different sizes in chrome, so it isn't the images. I also verified the sizes are the same in photoshop.

I'm going to give your CSS fix a try. Give me a few.

[swofford]

That fixed the chrome issue, but broke the mobile version... Whew... close:)

I was thinking that I should not use a table in the right and left and use floats. I got kind of lazy bc tables are easier. I am not sure what other CSS I could try.

[swofford]

Thank you for your help on this. This little thing has used so much time:)

[Porter]

I would definitely use floats, and just give each 50% width. My knowledge of structural changes such as that is pretty limited (I tweak things, don't write much from scratch), so you'll be on your own for that, but in theory it should work. Best of luck!

EDIT - Additionally, if that's breaking it on mobile, try simply adding the same code in the media query, with the width: 100%, it might work. If not, stick to floats, as tables are messy.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts