Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centric Pro Featured Page issue in IE
Tagged: cross-browser compatibility
- This topic has 12 replies, 2 voices, and was last updated 9 years, 9 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
July 10, 2014 at 10:23 am #113785kfillmore27Member
I'm having an issue with my client's site http://www.gwapapp.com. With the text overlapping the photo in Internet Explorer. What am I missing in my code? I have asked several places and I really need to figure it out ASAP! Please help!
http://www.gwapapp.comJuly 14, 2014 at 7:22 pm #114330Tony @ AlphaBlossomMemberLooks fine to me. If you're still having issues, please be more specific (which version ie, which text and photo, etc).
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 14, 2014 at 7:28 pm #114333kfillmore27MemberThanks Tony! I'm kind of new at this & was in a panic. I reverted my code back to a version that works, but the pictures are just too large.
What is the best way to have the images (all 4 of them, the phone mock-up in the top section and the three in the second section next to "Save Time" "Save Money" and "Simplify & Personalize"?
Resizing the photos is what made the layout break and caused me to seek help. So what's the best way to do that to ensure the layout stays the same across all browsers?
July 14, 2014 at 7:55 pm #114337Tony @ AlphaBlossomMemberNo problem! For the top image (centered phone), I would probably set a max-width:
.home-widgets-1 .textwidget img { max-width: 500px; width: 100%; }
You can set the max with in pixels or %, and might have to adjust the max-width for various media queries.
How are you adding the code to the widgets for the other three images? Are you adding all code, using a widget plugin, etc?
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 14, 2014 at 8:04 pm #114339kfillmore27MemberThank you so much! Does Max-Width work backwards with the older versions of IE? Apparently my client has Vista with IE 8 or 9.
As for the other three images, I was just adding the code. Is there a plug-in that would resize those images?
Kyra
July 14, 2014 at 8:24 pm #114340Tony @ AlphaBlossomMemberLooking more at this, I would make several changes to each section.
You can set a width on your img link and get rid of the margin-top (negative), etc:
.home-widgets .featuredpage .entry .alignleft, .home-widgets .featuredpage .entry .alignnone, .home-widgets .featuredpage .entry .alignright { margin: 0; width: 60%; } .home-widgets .featuredpage .entry .alignleft { float: left; padding-right: 50px; } .home-widgets .featuredpage .entry .alignright { float: right; padding-left: 50px; } .home-widgets .featuredpage .entry .entry-header, .home-widgets .featuredpage .entry .entry-content { width: 35%; float: right; margin: 0; } .home-widgets .home-widgets-2 .entry .entry-header, .home-widgets .home-widgets-4 .entry .entry-header { float: right; } .home-widgets .home-widgets-3 .entry .entry-header { float: left; } .home-widgets .featuredpage .entry .entry-header { margin-top: 50px; }
You might have to play with padding here .home-widgets .featuredpage .widget-wrap, and make some adjustments to the above padding/margins too.
I hope that gets you going in the right direction...you'll have to adjust your media queries also.
Let me know if this helps and if you're still having issues.
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 14, 2014 at 8:29 pm #114341Tony @ AlphaBlossomMemberHi Kyra,
Max-width is supported in all major browsers, and ie8 and up http://caniuse.com/minmaxwh
You could wrap the section title and content in a div for a little more control, but I'd avoid the extra markup if you can and the code above should take care of everything with a little more tweaking to get your spacing the way you want.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 14, 2014 at 9:17 pm #114344kfillmore27MemberThank you SO much! This is perfect! I may need some help with the media-queries but I want to try it myself first! Seriously, thank you, thank you!
Kyra
July 14, 2014 at 9:39 pm #114346Tony @ AlphaBlossomMemberMy pleasure, Kyra! I'm happy to hear that it worked.
Media queries should be straightforward, but if you get stuck let me know.
Have a great night!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 15, 2014 at 6:34 am #114380kfillmore27MemberOkay Todd,
I've been messing with it all morning and I can't get the smallest media query to look right for the featured page area. It's keeping the same layout of floating left/right and width at 60%. I changed the img max-width to 300px and width to 100%. So the pictures are the right size, just not the right place. Where am I going wrong? Thank you in advance!
July 15, 2014 at 12:37 pm #114416Tony @ AlphaBlossomMemberYou don't have to worry about max width, just set them to width: 100%.
Make sure that you're entering the same classes otherwise they won't take priority. For example, you have ".home-widgets .featuredpage .entry-content" in your responsive section, but .home-widgets .featuredpage .entry .entry-content" in your upper. The .entry class gives it priority, so make sure to use that in the media queries as well (otherwise you'll have to add !important to the end, but only recommend that as a last resort).
So if you added this to your media queries it will give 100% width on all of these:
.home-widgets .featuredpage .entry .alignleft, .home-widgets .featuredpage .entry .alignnone, .home-widgets .featuredpage .entry .alignright .home-widgets .featuredpage .entry .entry-header, .home-widgets .featuredpage .entry .entry-content { width: 100%; float: none; padding: 0; margin: 0 auto; } .home-widgets .featuredpage .entry .alignleft, .home-widgets .featuredpage .entry .alignnone, .home-widgets .featuredpage .entry .alignright { margin-bottom: 40px; /* optional - max-width: xxpx or xx%; */ } .home-widgets .featuredpage .entry .entry-header, .home-widgets .featuredpage .entry .entry-content { /* optional - margin: bottom: xxpx; */
You might have to tweak it a bit, but that will get you close.
Btw, who's todd 😉
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 15, 2014 at 2:53 pm #114435kfillmore27Memberhaha TONY
Sorry, my phone auto-corrected your name. Thank you SO, SO much for your help! All of your code made it easy to adjust mine to exactly what I was trying to create!
Thanks again!
Kyra
July 15, 2014 at 2:57 pm #114436Tony @ AlphaBlossomMemberhehe no worries Kyra, just giving you a hard time. I'm glad I could help...site looks great!
Have a great day!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.