Mobile problem with logo

My website is www . casino - online . bz
Template override is enabled.

After the template upgrade from 3.15 to 3.21 version the logo goes on the right and creates a blank column. Furthermore the 888 top horizontal banner disappear. That happens only with smartphone or tablet vertical view. Desktop is ok.
On the old template version 3.15 everything was perfect.

Could you help me to let the logo and banner work as usual?

Hi

Do You have a backup of old site ? I'm sure we had changes done to some file. Would be easier to just copy the code back than to create it from scratch.

You are right. I forgot to replicate this code for the mobile.css file.
* Top */
#gkBannerTop {
max-width: 100%;
}
#gkLogo {
float: none;
margin-top: 10px;
margin-bottom:20px;
width: 100%;
}
#gkLogo img {
width: 100%;
}

Now it seems ok, except for when a user watch the website on a tablet vertically.

casinoonline.jpg

As you can see the banner goes over the logo, instead of going under the logo.
I think only a few people will watch my website vertically on a tablet. Anyway if you can solve it, then I would be happy, if you cannot then I will accept that layout.

Hi

Try add this to override.css

@media only screen and (max-width:1190px) and (min-width: 641px) {
#gkBannerTop {
width: 400px;
}
}

Just added the code, but it does not work.

Hi

I cannot see the code in Your site. Maybe You need to clear cache or recreate compressions file.

Please send me an access to ftp, so I'll add it myself.

You are right I forgot to compress css again.
Now I decompressed and compressed css, cleared cache on joomla and cleared cache on browser.
Now I see the banner more little in the same row of the logo.
The banner cover a little part of the logo, but the banner does not go down under the logo as it is in the smarthpone.

No chance to put the banner under the logo?

Hi

Ok. Remove the code I gave You and use this instead.

Code: Select all

@media only screen and (max-width:1200px) {
#gkBannerTop {
    margin: 115px 0 0 !important;
}
}

@media only screen and (max-width:840px) {
#gkBannerTop {
    margin: 100px 0 0 !important;
}
}

@media only screen and (max-width:640px) {
#gkBannerTop {
    margin: 40px 0 0 !important;
}
}


Now, it is wonderful
Thank you Teitbite.

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro