Grow your CSS skills. Land your dream job.

Full responsive banner trouble

  • # May 2, 2013 at 1:09 am

    I have a problem building this responsive website: http://new.ingeniornytt.no/

    The two top banners to the right of the logo is not showing next to eachother for tablet size, but underneath eachother.

    I see the problem is the width, but how can I make the banners scale down and show the same way as it is showing in full view?

    For phone size it is ok that it is moving under the logo.

    # May 2, 2013 at 5:16 am

    It’s because the images aren’t scaling (if they are supposed to).

    Once you add up the total of the widths of the element inside the header they come to more than the width allowed in your media queries…so something has to move.

    I would look into working on making the images responsive. The first thing you should do is remove the inline dimension properties.

    # May 3, 2013 at 8:41 am

    Thank you for your answer, but I have tried to do it.

    Now the code is:

    .openx_top_ad *, .class-openx_block img {
    max-width: 100% !important;
    }

    I have tried to do this:

    .openx_top_ad *, .class-openx_block img {
    border:1px solid blue;
    width:50%;
    height:50%;
    float:right;
    }

    Do anyone have any ideas?

    # May 3, 2013 at 10:53 am

    That width probably won’t work unless they are in their own wrapper element. Otherwise they will default to 50% of the header div.

    I’m also still seeing inline CSS on the images.

    Also, this is probably not a good idea

    .openx_top_ad *

    # May 3, 2013 at 11:13 am

    If you remove the inline widths, you get this at under 800px wide

    # May 3, 2013 at 11:20 am

    Okay… but I want them like this

    http://screencast.com/t/QGcnHXta

    Any idea?

    # May 3, 2013 at 11:30 am

    You’d need to adjust your media query to stop them floating right and, perhaps float left along with removing all that inline CSS.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".