Add a responsive design

Hello,

On my website : http://www.planete-nextgen.com/ I have a banner.

But my banner is not responsive .

This is my code :

Code: Select all

<a title="Poster manga et série" href="http://www.abystyle-studio.com/fr/" target="_blank" onclick="_gaq.push(['_trackEvent', 'clic-sortie-dataedge', 'sortie vers dataedge']);"><img class="gkResponsive"  src="/images/banniere_429x55.jpg" alt="ABYstyle" border="0" width="429px" height="55px" /></a><span style="padding-left:5px"><a href="http://www.psparadise.fr/" target="_blank"><img class="gkResponsive"  src="/images/actus/psparadise.jpg" border="0" width="446px" height="55px" /></a></span>

How to have a reponsive banner please ?

Hi,
please try add to override.css

Code: Select all

#gkTopMenu img.gkResponsive {
    height: auto;
    max-width: 100%;
    width: auto !important;
}


and remember to enable override.css option in template settings.

Thank's Konrad, it's work but I have a little problem. When I reduce the website the second banner will be under the other.

How to reduce the two banner when I reduce my website (now it's work when the website is very little) ?

Try add both baners in to div's and add one class for both div's. For example 'half'. Then try add to override.css

Code: Select all

.half {
width:50% !important;
}


I have try this :

Code: Select all

<div class="half"><a title="Poster manga et série" href="http://www.abystyle-studio.com/fr/" target="_blank" onclick="_gaq.push(['_trackEvent', 'clic-sortie-dataedge', 'sortie vers dataedge']);"><img class="gkResponsive"  src="/images/banniere_429x55.jpg" alt="ABYstyle" border="0" width="429px" height="55px" /></a><span style="padding-left:5px"><a href="http://www.psparadise.fr/" target="_blank"><img class="gkResponsive"  src="/images/actus/psparadise.jpg" border="0" width="446px" height="55px" /></a></span></div>

But the first banner is under the second (not align), it's responsive but how to have the div inline ?

bug.jpg

Change my code to this one:

Code: Select all

.half {
width:50% !important;
float:left;
}


and remove all 'height' and 'width' parametres from your banners code.

it's work thank's a lot