Mobile/Tablet View

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Thu Aug 04, 2016 5:17 pm
Reply with quote
Report this post
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.
User avatar
Expert Boarder

teitbite
Mon Aug 08, 2016 9:18 am
Reply with quote
Report this post
Hi

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

GK User
Tue Aug 09, 2016 9:30 pm
Reply with quote
Report this post
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
User avatar
Expert Boarder

teitbite
Thu Aug 11, 2016 4:02 pm
Reply with quote
Report this post
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;
}
User avatar
Moderator

GK User
Thu Aug 11, 2016 5:42 pm
Reply with quote
Report this post
Great - it works perfect! Thank you very much!!
User avatar
Expert Boarder

teitbite
Sun Aug 14, 2016 1:10 pm
Reply with quote
Report this post
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
User avatar
Moderator

GK User
Tue Aug 23, 2016 3:23 pm
Reply with quote
Report this post
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!
User avatar
Expert Boarder

teitbite
Thu Aug 25, 2016 3:12 pm
Reply with quote
Report this post
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;
}
}
User avatar
Moderator

GK User
Fri Aug 26, 2016 7:04 am
Reply with quote
Report this post
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?
User avatar
Expert Boarder

teitbite
Sat Aug 27, 2016 1:34 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Sun Aug 28, 2016 9:03 am
Reply with quote
Report this post
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!
User avatar
Expert Boarder

teitbite
Wed Aug 31, 2016 11:18 am
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Sun Sep 04, 2016 8:45 am
Reply with quote
Report this post
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?
User avatar
Expert Boarder

teitbite
Wed Sep 07, 2016 10:41 am
Reply with quote
Report this post
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;
}
User avatar
Moderator

GK User
Wed Sep 07, 2016 12:43 pm
Reply with quote
Report this post
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.
User avatar
Expert Boarder

teitbite
Fri Sep 09, 2016 9:28 am
Reply with quote
Report this post
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;
}
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.