Mobile/Tablet View

Hi,

I would like to change the color of the menu bar to white. The dropdown list should be black. I can change the color of the menu bar but it doesn't work with the drop down list.

Thank you in advance.

Hi

Dropdown menu is a select html element, its display depends from browser, so it cannot be changed from website's code.

Sry for the wrong description, I meant the button of the dropdown list. The three white stripes should be black. And the black part should be white. Do you know what I mean?

Best wishes

Hi

I'm still not sure, but please add this to override.css and check if colors changed to what You were asking for:

Code: Select all

#gkHeaderNav #gkMobileMenu i {
    color: #000 !important;
}

#gkHeaderNav {
    background: #fff none repeat scroll 0 0 !important;
}


Great - it works perfect! Thank you very much!!

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

Hi, I have another question. I tried to change font size (from #gkBottom5 ul li) for tablet view, but it doesn't work.
Which code do I have to add to override.css to change font size only for tablet view?

Thank you in advance!

Hi

I do not know which page is this module on, but please try this code:

Code: Select all

@media only screen and (max-width:1030px) {
#gkBottom5 ul li {
font-size: 12px !important;
}
}


Perfect! Thank you very much!

I have another problem. The backgrund image at "bottom1" isn't like the demoversion. In mobile view you can only see a detail of the picture, but instead it should minimize like the demoversion. Which code do I have to add to override.css?

Hi

There are 2 additional images: one for tablet, other for mobile.

url("../images/common/dark_bottom_bg_tablet.jpg")
url("../images/common/dark_bottom_bg_mobile.jpg")

so You can prepare more suitable images for this devices.

Yes, but when I change the imagesize to 620x450 like the demoversion - it looks like you can see on the picture I have added. I've sent you a private message with url. Can you find a solution for me, please?

Thank you in advance!

Hi

I see. Your problem is with the content:

Code: Select all

<p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>


it basically adds a big, big space and You need to operate with this module's content height to make image show more on sides. Remove this content and replace it with:

Code: Select all

<div class="group_photo"></div>


than in css operate the height of this module with a code:

Code: Select all

.group_photo {
height: 200px;
}

@media only screen and (max-width:1024px) {
.group_photo {
height: 150px;
}
}

@media only screen and (max-width:800px) {
.group_photo {
height: 100px;
}
}


and so on. I've used examples, but I bet You get how to use it.

Thank you very much!
For the height it works but breathways it only shows a part of the picture (in mobile and tablet view). I already tried to add width to the part of the css code you told me, but it hasn't worked. What else could I try?

Hi

Yes You are rigth, I forgot about one small thing. This needs to be added to override.css in order for image to start resizing:

Code: Select all

.frontpage.dark-bottom #gkDarkBottom {
background-size: cover;
}


Ok great! It works but not perfect .. I can't see the whole picture - like on the PC-version!
I have sent you a private message, so you can see what I mean.

Hi

It was really not prepared to show an actual picture so it's really hard to figure that out ;/

Try maybe this code in place of the last one I gave You:

Code: Select all

.frontpage.dark-bottom #gkDarkBottom {
    background-position: center center;
    background-size: 100% auto !important;
}