menu and banner resize problem

Hello everyone,

I have 2 small problems.

First is about main menu.
It doesnt work properly looks like. resize limit is 1300px.
http://hvacspider.com/images/gavick/26-07-2016/spider.png

Second problem is banners.
As you can see, I made 4 banners with same size.
http://hvacspider.com/images/gavick/26-07-2016/spider.png
Than I made them in line with this code

Code: Select all

.banneritem,
.banneritem .clr{
   display: inline;
}

Till here everything is ok. But when the size getting small, banners are goes to under others one by one.
here are the images of settings
http://hvacspider.com/images/gavick/26-07-2016/banner-settings.png
http://hvacspider.com/images/gavick/26-07-2016/module-settings.png

I think banners supposed to looks like this for each settings.
http://hvacspider.com/images/gavick/26-07-2016/banner-resize.png

about banners, I am open for different ideas but I must show Impressions and Clicks to my customers.

I hope I explained well my problems with my bad english.

Regards
Okan

I need your help guys

Hi

Please remove:

Code: Select all

.banneritem,
.banneritem .clr{
   display: inline;
}


it's an outdated code.

Than tell me the url to Your site.

Hello TEITBITE,

url is www.hvacspider.com

thanks

Hi

I can see You've already used onlymobile/nomobile module class suffixes to replace the module banners, so I have no environment to position those banners anymore. If You still want me to provide a solution about positioning 4 banners than please prepare it for me, so I'll be able to use developer tool and come up with a styling which will work for every screen width.

Hello again teitbite,

I have published 4 banners for you under this link.
http://www.hvacspider.com/develop
after find a solution about this, i will move the settings to the main link.

Thanks a lot for help
Regards
Okan

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

div.bannergroup {
    text-align: center;
}

div.banneritem {
    display: inline-block;
    padding: 0.5%;
    width: 23%;
}

@media only screen and (max-width:1000px) {
div.banneritem {
    width: 48px;
}
}

@media only screen and (max-width:500px) {
div.banneritem {
    width: 98px;
}
}


I have changed a bit your code and it works like a charm for me
thanks a lot

Code: Select all

div.bannergroup {
    text-align: center;
}

@media only screen and (min-width: 640px){
div.banneritem {
    display: inline-block;
    padding: 0.5%;
    width: 23%;
}
}

@media only screen and (max-width: 639px){
div.banneritem {
    display: inline-block;
    padding: 0.5%;
    width: 46%;
}
}

i will be appreciated if you help me about menu also.
It doesnt work well btw
1600px-1201px
and
1052px-1031px

Hi

Looks like You have too many options. I advice resizing text and changing spaces between elements:

@media only screen and (max-width:1300px) {
#gkPageTop .gkMenu > ul > li > a {
font-size: 0.8rem;
padding: 0 7px;
}
}

Awesome,

Thanks a lot TEITBITE

Regards

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