Grüße aus Bonn nach Euskirchen!

Wenn ich für die mobile Version sachen verändern möchte nehme ich mir die Developer Tools die es in den Browsern so gibt.
Der Firefox zB hat “Bildschirm Größen Testen” oder alt cmd M – da kann man dann ein Handy auswählen, muss dann jedoch einmal den Inhalt refreshen. Dann kann man mittels “Element untersuchen” die Eigenschaften für das jeweilige Devise sehen.

Man sieht dann zB was Enfold alles für Klassen an html anfügt für das jeweilige Device (hier mal iphone) bzw sogar Browserverwendung zB:
html avia_mobile avia-safari avia-safari-602
habe die anderen Klassen weggelassen die mit dem Device nichts zu tun haben.
Eine Klasse setzt Enfold immer bei Verwenugng von Mobilen Endgeräten: avia_mobile

sodass man im Prinzip garnicht über das media-Query der Weite gehen muss – sondern mittels der html klasse ganz vorne gezielt Änderungen an Mobilen Endgeräten setzen kann . z.B:

.avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

das heißt hier wird wirklich nur für mobile Endgeräte die Schriftfarbe geändert, nicht wenn Du das Browserfenster schmal ziehst.

___________ english Version: ________

Greetings from Bonn to Euskirchen!

If I want to change things for the mobile version I use the developer tools which are available in the browsers.
The Firefox e.g. has “screen size test” or alt cmd M – there you can select a mobile phone, but you have to refresh the content once. Then you can use “Examine element” to see the properties for the respective foreign currency.

You can see for example what Enfold adds to html for each device (here iphone) or even for browser use:
html avia_mobile avia-safari avia-safari-602
have omitted the other classes that have nothing to do with the device.
One class always sets Enfold when using mobile devices: avia_mobile

so that in principle you don’t have to go beyond the media query of the distance – but can use the html class right at the front to make targeted changes to mobile devices . e.g:

.avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

this means that the font color is really only changed for mobile devices, not if you narrow the browser window.

i don’t know if these values correlates a bit with f.e. photoshop jpeg Quality.
If so it might be in the most cases a good value of 35% – 45%
i hope that the original uploaded image is untouched.
You see here a post of mine to the same issue. https://kriesi.at/support/topic/a-better-image-resize-algorithm/

or – because on mobile devices – Enfold adds a class to html ( avia_mobile ) you can do it without checking the width:
(avia-compat.js line 11)

.avia_mobile .avia-image-overlay-wrap a.avia_image .image-overlay {
    display: none !important;
}

if you merge css and js or have other caching plugins – refresh all caches etc.

What do you mean by “in the comments section”
On Enfold Options – Blog Layout – Share links at the bottom of your blog post
you have the possibility to set sharebuttons under each post/portfolio.

So this is not the place you want to show them?

PS on this here: https://kriesi.at/support/topic/pdfs-not-found/#post-1005108 you inserted a wrong link too.
Can you please tell us what you are doing / inserting on the text-input fields

But

please use the code tag here on board.
1) click the code button above
2) paste in your code
3) click again (now you see button has changed to closing tag) /code

_______ now______on your code there was one missing – that it is a manually set code. See if i create a Button with your link:

[av_button label='Download e-Brochure' link='manually,http://wpg.com.gridhosted.co.uk/wp-content/uploads/2018/09/sns.pdf' link_target='_blank' size='medium' position='left' label_display='' icon_select='yes' icon='ue8ad' font='entypo-fontello' id='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av_uid='av-jlngc6oc' custom_class='' admin_preview_bg='']

link=’manually,http:// …

But both should work ! – did you work only with debug mode ?
the link is totaly abstruse: nested and an anchor in a href attribut etc. pp:

click to enlarge:

if you mean that Button: “Download e-Bruchure” – why don’t you insert on a manual link the url of your pdf ?

PS : same thing with your website link

get rid of the u !

.header_mail  .avia-menu-text:before {
font-family: 'entypo-fontello';
content: " \e805";
color:#877a65;
font-size:18px;
}

and maybe it is important to position it a bit in relation to the text:

.header_mail  .avia-menu-text:before {
font-family: 'entypo-fontello';
content: " \e805";
color:#877a65;
font-size:18px;
position:relative;
top: 4px;
padding-right: 5px
}

play a bit with top and padding

well – maybe you followed the fix of ismaels link – i can see the fallbackimage now.
and by the way you did not mention that it is a cdn video. Sometimes this will be a source of troubles too.

without a link i’m out here.
It could be all (including line-height) Sorry

And i think there will be no good way with a shrinking header

last speculation:

.bildlink.menu-item {
    overflow: visible !important;
}

.bildlink a {
    line-height: 10px !important;
    overflow: visible !important;
    text-align: center !important;
}

.bildlink.menu-item img {
    display: block;
    width: auto !important;
    height: 50%;
    position: relative;
    margin: 0 auto;
}

.bildlink .avia-menu-text {
    line-height: 20px;
    vertical-align: top;
}