The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Full responsive banner trouble

  • # May 2, 2013 at 1:09 am

    I have a problem building this responsive website:

    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;

    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

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed