breadcrumb line break on mobile version

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.

Could You please post an url to your site?

http://www.heikoraschke.de/geschichten-erwuerfeln/

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).

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;
  }
}


I shortened the Logo text. Now with your help it looks nice. Thank you very much.

Now it looks exactly as it should