breadcrumb line break on mobile version

Modern, responsive, unique and elegant one-page WordPress theme to showcase your creativity
GK User
Sat Mar 08, 2014 4:52 pm
Hi there,
I discovered two layout problems with the theme on my smartphone and need some help to fix it.

1) breadcrumb line break
as you can see on the picture below, I have a problem with the line break of the breadcrumb on my smartphone (IOS 7). How can I add an automatic line break on the mobile version of the creative theme?

2) logo slogan
In my opinion there is not enough space to read my blog on a smartphone comfortably. So I would like to delete the grey logo slogan on the mobile version. Could you please give me a hint how to delete this?


Thank you very much for your great support.
User avatar
Fresh Boarder

GK User
Sun Mar 09, 2014 8:41 am
Could You please post an url to your site?
User avatar
Moderator

GK User
Mon Mar 10, 2014 10:45 pm
User avatar
Fresh Boarder

GK User
Thu Mar 13, 2014 6:39 pm
The problem is with 2 things.
This template's header must fit specified width, in any other cases there is gonna be a problems.
With your template you have added more items to menu + you logo is quite wide. Fixing that will take a lot of time.
My first suggestion is to use smaller "logo" - you can do this by working on font size and spacing between menu elements:
Please edit: wp-content/themes/Creativity/css/override.css
Code: Select all
a.textLogo {font-size: 16px; padding-top: 20px}
a.textLogo small {font-size: 8px;}
#gk-top .menu > li > a {padding:0 10px;}

Remember to enable "Use the override.css file" in theme settings (item in admin menu, under comments section, advanced tab).
User avatar
Moderator

GK User
Thu Mar 13, 2014 6:52 pm
Now your breadcrumbs render in different way than on our demo server... To fix the styling add this to override.css:
Code: Select all
.gk-breadcrumbs {padding: 0px;}

@media  (max-width: 820px) {
  .gk-breadcrumbs > a:before, .gk-breadcrumbs > span:before {   
    font-size: 22px;
  }
}

@media  (max-width: 560px) {
  .gk-breadcrumbs > a, .gk-breadcrumbs > span {   
    line-height: 1.6 !important;
  }
  #gk-breadcrumb-area {   
    padding: 10px 0;
  }
}
User avatar
Moderator

GK User
Sun Mar 16, 2014 3:04 pm
I shortened the Logo text. Now with your help it looks nice. Thank you very much.
User avatar
Fresh Boarder

GK User
Mon Mar 17, 2014 1:08 pm
Now it looks exactly as it should :)
User avatar
Moderator


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