Centric Pro Featured Page issue in IE

Community Forums Forums Design Tips and Tricks Centric Pro Featured Page issue in IE

This topic is: not resolved

This topic contains 12 replies, has 2 voices, and was last updated by  Tony @ AlphaBlossom 2 months, 2 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #113785

    kfillmore27
    Member
    Post count: 5

    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.com
    #114330

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Looks fine to me. If you’re still having issues, please be more specific (which version ie, which text and photo, etc).


    #114333

    kfillmore27
    Member
    Post count: 5

    Thanks 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?

    #114337

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    No 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?


    #114339

    kfillmore27
    Member
    Post count: 5

    Thank 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

    #114340

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Looking 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


    #114341

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Hi 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.


    #114344

    kfillmore27
    Member
    Post count: 5

    Thank 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

    #114346

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    My 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


    #114380

    kfillmore27
    Member
    Post count: 5

    Okay 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!

    #114416

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    You 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 ;)


    #114435

    kfillmore27
    Member
    Post count: 5

    haha 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

    #114436

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    hehe no worries Kyra, just giving you a hard time. I’m glad I could help…site looks great!

    Have a great day!


Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.