Can you link to that demo page please?

yes – that is as you said above the same tree structure of folder. So put in your edited alb file to the shortcodes folder. The code above reflects exactly that structure.
For a lot of other child-theme files this will be enough ( like you tried before ) most of the php files f.e. to have your own child-theme loop-index.php. Just put it in the child-theme includes folder. There is no need to have a code snippet like the one above.
For js files there had to be new loading snippets ( de-register the parent-script – enqueue the new child-theme script) – f.e. avia-snippet-sticky-header.js file to have your own header shrinking etc. pp

yes because it is not that ID:

.page-id-103 .avia-slideshow-arrows {
    display: none;
}

try first without !important. if it does not work set it to important.

ich werde dich per E-Mail nochmal kontakten.

A background-image is a backgroundimage is a background image.

All kidding aside. You could of course set the color section to follow the aspect ratio of the background image, but you run the risk of making the content too large for the container, which would then be cropped / overlapped.

Example: if you have an Iphone 6, the maximum width is about 375px – with a 16:9 picture you will have about 210px height.
With a font size of 16px and 1.5 times the line height per line, this would be 40px – making about 5 lines at 210px.
Everything above that would be too large.

Now you could of course set the property of the background image to “contain”, but then, like Ismael, you would have white areas without image.

See responsive color-section on .: https://webers-testseite.de/terve/
on wide screens this maybe ok – but on smaller screens ?

Does your background-image scroll or is it set to fixed?
(Edit : i ask – because there will be a solution if it is set to scroll.)

_____

But however it will be easier to blur it in a graphic programm and upload that blurred image.

Hallo Tobias : das wird mit dem Sliden ein Problem – denn das ist irgendwie auf Overflow: hidden angewiesen.
Eventuell kannst du mit faden ja zufrieden sein:
Das wäre hier so ein aufbau:

Color-Section : 1/1 container darin – dort dann einen easy slider platziert:
Der Color-Section gab ich eine benutzerdefinierte Klasse.

.slideshow-test .avia-caption {
    position: absolute;
    left: 60%;
    z-index: 50;
    top: 0;
    width: 40%;
    height: 100%;
    padding: 30px;
}

.slideshow-test .avia-slideshow li img {
    display: block;
    width: 60%;
    margin: 0;
    border-radius: 3px;
    position: relative;
}

.slideshow-test .avia-slideshow li  {
    z-index: 10 !important;
}

.slideshow-test .avia-slideshow-inner::before {
    content: "";
    background-color: #f9be46;
    width: 40%;
    height: 100%;
    z-index: 10;
    position: absolute;
    right: 0;
}

.slideshow-test .caption_framed .slideshow_caption .avia-caption-content p, 
.slideshow-test .caption_framed .slideshow_caption .avia-caption-title, 
.slideshow-test .avia-caption .avia-caption-content p, 
.slideshow-test .avia-caption .avia-caption-title {
    background: none;
    display: inline-block;
    margin: 0 0 1px 0;
    padding: 10px 15px;
}

https://webers-testseite.de/tobiasp/
aber: du siehst, dass der responsive Fall natürlich ein Problem darstellt. Bei Viel Text in der Caption.
Und das Laden nicht so gelingt ohne den Übergang zu vermeiden. Daher bleibe ich mal dran an dem Thema.
Ich muss mich da wohl oder Übel einlesen in “mutationobserver”

Ich habe hier mal eine Anfrage, dass wäre sicherlich eine Lösung: https://kriesi.at/support/topic/bind-event-to-slide-change/

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

zunächst einmal : Du schreist mich nicht wirklich an – oder ? Nichts Anderes ist es wenn man in Foren Alles in Großbuchstaben schreibt ;)

Also wenn Du bitte zunächst das mal umsetzt und auch kurz dann so lässt, dann kann man eventuell auch den Rest noch erledigen.

Dann wäre es hilfreich, du würdest für die Zeit des Layouts das Merging abstellen. Zumindest das vom CSS – dann sieht man auch schneller wo andere Einstellungen mit hineinspielen.

Das Logo muss die Möglichkeit haben bei sehr kleinen Screenweiten auf den verbleibenden Platz zu reagieren; oder du musst um für alle Screenweiten die gleiche Größe zu haben – Auch für breitere Screens ein Kleineres Logo in Kauf nehmen.
Das Logo hat am Anfang ungefähr eine Weite von 400px – wie willst du das ohne Veränderung in eine Screenbreite von 375px inclusive dem Hamburger-Menü und Padding sonst unterbringen?

Versuche jetzt bitte mal das hier:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  #header_main {
    border: none;
  }
  
  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: rgba(255,255,255,0.6) !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    max-height: 80px !important;
  }
  
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

teste es geren mit dem rgba(255,255,255,0.3) aber du wirst sehen, dass etwas weniger Transparenz besser aussieht. Das ist aber Dir überlassen.

______________________
first of all : you are not really shouting at me – are you ? Nothing else is it if you write everything in capital letters in forums ;)

So if you please put this into practice and leave it like this for a short time, then you might be able to do the rest.

Then it would be helpful if you would turn off the merging for the time of the layout. At least that of the CSS – then you can see more quickly where other settings play a role.

The logo has to be able to react to the remaining space on very small screens; or you have to accept a smaller logo to have the same size for all screens – even for wider screens.
The logo has a width of about 400px at the beginning – how else do you want to fit this into a screen width of 375px including the hamburger menu and padding without changing it?

Remove all your settings on that and try :

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  

  .responsive #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
 
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

No i can’t : because i’m participant as you – so if there are different links in private content – i do not see them.
On your link above i only the the Maintenance Mode Page

Maybe you can look to the enfold options : header – extra elements – Header Social Icons : and set it to “Display in main header area”
_______
By the way: Even if GB is no longer part of the European Community – you must comply with the GDPR.
Every page with links or share the identity of the site owner (even a phone number is sufficient) must have an imprint and a privacy policy page.

Many of the “Under Construction” sites make the mistake of providing contact information and fall into the legal trap

Hallo Tobias – is there a page i can see as a participant too?
Your page link above goes to an answer of mine – so maybe i got an idea.

have a look here : https://webers-testseite.de/sticky-sidebar/
the code – and instruction is there.
and similar to that : https://webers-testseite.de/sticky-elements/

Does it work as you like to have it?
Your site is only available with the front-site for non logged-in users.