Hi Peter,
hat leider nicht funktioniert. Konnte den Fehler jedoch durch eine CSS-Anpassung innerhalb von prettyphoto beheben.

/*prettyPhoto adjustments for mobile devices. 1024px is presumed widest device.*/
@media screen and (max-device-width: 1024px) {
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: scroll; -webkit-overflow-scrolling : touch; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
#pp_full_res { line-height: 0.7 !important; }
.pp_details { width: 94%!important; padding: 15px 3% 15px 3%; min-height: 35px; background-color: #fff; margin: 0!important; }
div.pp_default .pp_description {margin: 11px 50px 5px 153px !important; }
div.ppt { display:none !important; }
.pp_play {margin-right: 20px !important;}
.pp_arrow_previous {margin-right: 5px !important;}
}

Vielen Dank.
Gruß,
Nic

Ok guys, theme updated. results of my testing are:

In Google Chrome it does not appear. The page fades to grey and if you scroll down to the bottom of the page there is a large white space displayed.
On Samsung Tab 3 – Chrome browser now displays the lightbox, but you have to “chase” it down the screen
On Samsung Tab 3 – native browser it does not show the lightbox and now you can’t change the image that appears in the ‘big thumbnail’ by selecting one of the small thumbnails
On Samsung Galaxy S2 – native browser, lightbox doesnt show and now you can’t change the image that appears in the ‘big thumbnail’ by selecting one of the small thumbnails. Extended Header issue resolved
On Samsung Galaxy S2 – Chrome browser: Extended Header. Google Font not showing, Gallery ‘Big Preview’ height not auto adjusting as per the CSS. Lightbox does not appear although page fades to grey and it seems that you can ‘chase’ it down the screen but its not showing
On IE11 everything works as expected

here’s a screen shot of how i have the header.php configured with the google font code if it helps:

https://www.dropbox.com/s/4ddig3zdh90t31g/headerphp.PNG

thanks,
stu

I’ve added the new piece of code but it’s still causing problems. Here’s all the code in the CSS:

.sub_menu { font-size: 16px; } /* changes the font size of sub menu */
.fixed_header.social_header #main { padding-top: 174px; }
.main_menu ul:first-child > li > a { line-height: 190px !important; }
#header .mega_menu_title { #0e2f61; }

.title_container { background: url(http://www.test.theimplantcentre.com/wp-content/uploads/2014/02/Crumbsbanner41.jpg); }

.avia-heading-row {
color: white;
}
.price-top-margin {
margin-top: 37px;
}

tr th:first-child, tr td:first-child {
vertical-align: top;
}
.main_color tr.avia-heading-row {
background: #2f5691;
}
#header_main, .header_color .main_menu .menu ul li a { background-color: white; }

#header_main, .header_color .main_menu .menu ul li a { background-color: white; }

.tab_titles div {
font-size: 14px !important;
}
.avia_mega_div, .avia_mega_div .sub-menu {
background: white !important;

@media only screen and (min-width: 1140px) {
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
height: 40px !important;
line-height: 25px !important;
}}

#header_main .container, .main_menu ul:first-child > li > a {
height: 143px !important;
line-height: 190px !important;
-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}

.header-scrolled #header_main .container, .header-scrolled #avia-menu > li > a {
height: 80px !important;
line-height: 80px !important;
}
#header_main img, #header_main .logo, #header_main .logo a{
width: 252px !important;
height: auto !important;
max-height: none !important;
max-width: none !important;

-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}
.header-scrolled #header_main img, .header-scrolled #header_main .logo, .header-scrolled #header_main .logo a{
width: 126px !important;
height: auto !important;
}
.avia-content-slider .slide-entry-title {
display: none;
}
#main > div.main_color.container_wrap.fullsize > div > main > div > div > div.flex_column.av_one_half.avia-builder-el-11.el_after_av_one_half.avia-builder-el-last.column-top-margin {
margin-top: -8px;
}
#av_section_1 > div > div > div > div > div.flex_column.av_one_fourth.first.avia-builder-el-13.el_before_av_three_fourth.avia-builder-el-first > section {
margin-top: 20px;
}

.page-id-75 .avia-section-small .content {
padding-top: 0;
}

.header_color .avia-tt { background-color: white; }
.header_color .ajax_search_image { color: white; }

.header-scrolled .main_menu ul:first-child > li > a { line-height: 58px !important; }

Hi Jouse, strange how It did not transferred with other tables, I changed it manually…

Anyhow, if you would like, we can go back and try to fix the auto scrolling issue (isn’t it just applying the js for #top on each #” there is?).

Could I ask for another advice: How can I make the H2 to be a normal ‘unicase’?

Thanks!

I’ve done it but it doesn’t seem to have made any difference. This is all the code I have in…

#header_main .container, #avia-menu a {
height: 143px !important;
line-height: 143px !important;

-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}
.header-scrolled #header_main .container, .header-scrolled #avia-menu a {
height: 80px !important;
line-height: 80px !important;
}
#header_main img, #header_main .logo, #header_main .logo a{
width: 252px !important;
height: auto !important;
max-height: none !important;
max-width: none !important;

-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}
.header-scrolled #header_main img, .header-scrolled #header_main .logo, .header-scrolled #header_main .logo a{
width: 126px !important;
height: auto !important;
}
.sub_menu { font-size: 16px; } /* changes the font size of sub menu */
.fixed_header.social_header #main { padding-top: 174px; }
.main_menu ul:first-child > li > a { line-height: 190px !important; }

Yep added to the “Shop” page but there is no such element
————— Cant attach screen shots so here is a copy paste of the text:

Add/Edit Gallery
Image Number
How many images should be displayed per page?

Pagination
Should a pagination or load more option be displayed to view additional images?

Size Settings
Here you can select how the masonry should behave and handle the images

Flexible Masonry: All images get the same width but are displayed with their original height and width ratio

Perfect Grid: Display a perfect grid where each image has exactly the same size. Images get cropped/stretched if they don’t fit

Perfect Automatic Masonry: Display a grid where most images get the same size, only very wide images get twice the width and very high images get twice the height. To qualify for “very wide” or “very high” the image must have a aspect ratio of 16:9 or higher
Gap between elements
Select the gap between the elements

Image overlay
Do you want to display the image overlay effect that gets removed on mouseover?

Image Title and Caption
You can choose if you want to display title and/or caption

Element Title and Caption
You can choose whether to always display Title and Caption or only on hover

Image Link
By default images link to a larger image version in a lightbox. You can deactivate that link. You can also set custom links when editing the images in the gallery

For Developers: Section ID
Apply a custom ID Attribute to the section, so you can apply a unique style via CSS. This option is also helpful if you want to use anchor links to scroll to a sections when a link is clicked

Use with caution and make sure to only use allowed characters. No special characters can be used.

Thanks! I added that but when I scroll down (using a sized down browser window) I can still faintly see the text behind the header when it scrolls up.

Here are the full contents of Quick CSS

.logo, .logo img {
max-width: 340px !important;
width: 340px !important;
height: auto !important;
max-height: none !important;
}
.logo img{
position: relative;
top: -40px;

}
body {
font-size: 15px;
}
.avia_message_box_content { text-transform: capitalize; }

#header_main .container, .main_menu ul:first-child > li > a {
height: 88px !important;
line-height: 88px !important;
}

html.fixed_header #main {
padding-top: 88px;
}

.logo a {
max-height: none !important;
}