Hi @Mike
the transition is nice and smoth.
The appearing issues are the following:
1. the breadcrumbs do not disappear entirely, a piece remains visible under the header : picture
2. while returning to the top of the page, here’s the situation (picture) :
— 1) two spaces appears abouve and under “OBSERVING & ANALYZING MANKIND”
— 2) the breadcrumb doesn’t come back
— 3) and the title doesn’t come back neither

PS: for the moment I’ve “closed” the script with /**/ before you come back to it

Hello ?

Oups, sorry
http://www.newpointdeview.com

• This reply was modified 5 years, 7 months ago by Anton.

Here’s the code I’ve finally found for my layout (https://msinternational.eu/kosiko-en-tyvek/) :

/*Logo area for iPad*/
@media only screen and (min-width: 767px) and (max-width: 989px) 
{#top #wrap_all .av_header_transparency {background-color: #000000 !important; color: #ffffff; border-color: #000000;}
.phone-info {float: none !important; width: 100%; clear: both;}
#top .logo {height: fit-content; max-width: 67% !important;}
#top .av-main-nav .menu-item-avia-special {display: block !important;}
#top .av-main-nav .menu-item {display: none !important;}
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {height: 48px !important; line-height: 48px !important;}
.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {line-height: 48px !important;}}

/*Logo area for Mobile*/
@media only screen and (max-width: 767px) 
{.responsive #top #wrap_all .av-logo-container, .responsive #header_main .container, .main_menu .av-main-nav > li > a {height: 48px !important; line-height: 48px !important;}
.responsive #top .logo {height: inherit !important;}
.avia-menu.av_menu_icon_beside {margin-right: inherit;}
.responsive #top #header .main_menu .social_bookmarks {margin-top: -32px;}}

Let’s keep the topic open for a while, I’ll probably need to readjust things later. Thanks

Hi,
I’ve activated the header shrinking, but I’ve also added Header Custom Height 48px. So the shrinking issue is resolved de facto.
My last issue : the logo on iPad screen. Please visualise it https://msinternational.eu on iPad.
Can you, pease, give me the necessary code to adapt and center it, as necessary, on all iPad screens, the same way it already works on mobile phones

Hi Mike,
the code you’ve mentionned is mine. For now I’ve postponed it. You can see the result (https://msinternational.eu). This is what I had from the very beginning. And the original code was:
.logo {max-width: 200px; padding-top: 40px;}
And yes, I’d like the same result as at https://www.newpointdeview.com/blog/sommaire/ (which is the same on all pages of this website)

Hello,

well, looks like it works now :)
thank you so much !
you can close the thread

Best,

Here you go

Hi,

I don’t know what do you mean by “for now”, but I’ve disabled it

https://www.newpointdeview.com/blog-en/

Ok, the last question:
are you going to adapat Enfold to the WP 5.0 in Novemeber, so we can use Enfold page builder which is unusable with Gutenberg for the moment ?
Thank you

Hi,
as I already mentioned, defining the precise height in this particular case is NOT adapted. Because depending on the device showing the page the height and the width are obviously different, that’s why it is necessary to automatize the height of these i-frames.
This is the actual code I use following your suggestions:

/*Video Youtube footer and sidebar adjustment*/
iframe, object, embed {width: 100%!important;}
.sidebar .widget_text iframe {height: 180px;}
#footer .widget_text iframe {height: 220px;}

This is convenient for a PC screen, but not for mobile and/or iPad screens.

So, can you advise me how to automatize the height?