Community Forums › Forums › Archived Forums › Design Tips and Tricks › Chrome CSS Issue
- This topic has 8 replies, 2 voices, and was last updated 8 years, 5 months ago by Porter.
-
AuthorPosts
-
October 25, 2015 at 12:34 am #168950swoffordMember
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:)
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.comOctober 25, 2015 at 2:28 pm #168988PorterParticipantThe 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.
October 26, 2015 at 9:59 am #169057swoffordMemberThanks 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.
October 26, 2015 at 10:43 am #169066PorterParticipantI 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.
October 26, 2015 at 10:47 am #169068PorterParticipantIf 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.
October 26, 2015 at 11:19 am #169077swoffordMemberHey 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.
October 26, 2015 at 12:49 pm #169090swoffordMemberThat 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.
October 26, 2015 at 12:49 pm #169092swoffordMemberThank you for your help on this. This little thing has used so much time:)
October 26, 2015 at 12:51 pm #169095PorterParticipantI 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.