Full responsive banner trouble

[Helen76]

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.

[Paulie_D]

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.

[Helen76]

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?

[Paulie_D]

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 *

[Paulie_D]

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

[Helen76]

Okay… but I want them like this

http://screencast.com/t/QGcnHXta

Any idea?

[Paulie_D]

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

[Author]

Posts