Magazine theme and mobile version

February 2013 WordPress Theme
GK User
Tue Sep 10, 2013 9:24 am
Hi,

I got some issues in the mobile version of the theme.

First, search bar and email button doesn't display.

Then, at the right of the logo, the inset bar is there. Not in your example site ...

And finally, my logo hide the title in a post page. You can see in the attachment.

Can you help me ?

Thanks

POST.jpg

HOME.jpg
User avatar
Junior Boarder

GK User
Tue Sep 10, 2013 9:52 am
Hi,

Hi I checked this on original theme and it's ok, could you provide an URL to your website (here or via PM), then i'll be able to help you..
User avatar
Moderator

GK User
Tue Sep 10, 2013 9:54 am
Hi,

The URL of the website is www.focused.fr
If you need admin details, please let me know.

Also, I would like to know how to change the color of the menu (in yellow)

Bastien
User avatar
Junior Boarder

GK User
Tue Sep 10, 2013 2:35 pm
Which version of iOS are you using? I checked on v. 6.0 and search bar and email button are visible on your website.

Problems with the logo can be fixed using the following code. (Paste this into css/override.css file, first enable this option in Dashboard -> Template Options -> Advanced Tab)
Code: Select all
#gk-head a.imageLogo img {
height: 110px;
}


Color of the menu can be changed by switching theme color (Template Options -> Basic), if you want to change ONLY the color of this menu, you have to replace Magazine/images/style1/tablet_menu.png file.(check tablet_menu.png from other directories style2,style3 etc..)
User avatar
Moderator

GK User
Tue Sep 10, 2013 2:50 pm
Hi,

I'm using IOS 6.1.3 with an iPhone 4S.
Maybe you're using an iPhone 5 ?

I tried your override and on this device it doesn't change anything. I tried with height 80, width 91 and it was ok (ugly but ok). The problem is that it affects also the normal version ...

The inset bar is still there ...
User avatar
Junior Boarder

GK User
Tue Sep 10, 2013 7:19 pm
Tommorow I'll check it on this version.

Use mentioned code, but instead of override.css, use mobile.css file (css rules only for mobile version).
Could you give ma a screenshot with this inset bar marked? because i'm not sure..
User avatar
Moderator

GK User
Wed Sep 11, 2013 8:42 am
Hi,

The mobile.css did the trick, thanks !

Please find below two screenshots : one with my website, one with yours. You can see the inset bar I was talking about.
You can also see that I don't see search bar or mail icon ...


focused.jpg


gavick.jpg
User avatar
Junior Boarder

GK User
Wed Sep 11, 2013 10:42 am
Ok,

paste this code to override.css file:
Code: Select all
#gk-head a.imageLogo {
    height: auto;
}


so on http://www.gavick.com/magazine searchbar and mail are visible, could you please check also this URL? http://demo.gavick.com/wordpress/magazine/
User avatar
Moderator

GK User
Wed Sep 11, 2013 10:52 am
The code with the bar made everything work !
The icon now appears correctly.

Is it possible to have facebook and twitter icon appears ont he mobile version ?
User avatar
Junior Boarder

GK User
Wed Sep 11, 2013 12:40 pm
Facebook and twitter icon should appear on the mobile version too. Did you set any widget rules in your GK Social widget?
User avatar
Moderator

GK User
Wed Sep 11, 2013 2:15 pm
Hi,

Please find below my social widget :

social.jpg


No rules are made for prevent social to display on mobile.

But as you can see this is the same in GK Magazine ...
User avatar
Junior Boarder

GK User
Fri Sep 27, 2013 10:16 am
Finally I found a solution. Social icons have additional media queries in css/template.css file.
Code: Select all
@media (max-height: 480px) {
   #gk-social-icons {
      display: none;
   }
}


You can change max-height value or remove it, but this rule hides social icons on devices with smaller screen size (height exactly), because there's no enough space for all icons in toolbar.
User avatar
Moderator

GK User
Fri Sep 27, 2013 10:24 am
Hi,

Works perfectly, thanks for the tip !
Bastien
User avatar
Junior Boarder


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