Well if you like to have a more complex but nice solution go and Mikes advice and use the flex model :

try in quick css – and a link to your site would be nice:

.av-tab-section-tab-title-container {
  display:flex !important;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  width: 100vw !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  left: 0 !important;
}

#top .av-section-tab-title {
  padding: 0 ;
  flex: 0 1 auto;
  min-width: 20%;
}

.av-outer-tab-title {
  display: inline-block;
}

.av-tab-section-image,
.av-tab-arrow-container {
  background-position: center center;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

can i see your dev site ? its password protected.

by the way – you can drag and drop svgs directly to Powerpoint !

The setting whether a Youtube video plays in HD or not depends not only on the default but also on the playback of the device itself. So if Youtube “notices” that the transfer rate is not so stable, then there will be lower resolutions. Similar to TV streaming. If the WLAN does not participate, then the resolution goes down.

In former times there are addenda to the url you can make autoplay etc. pp. vor HD files you could add : ?vq=hd720 or if it is not the first addendum with ampersand instead of questionmark: &vq=hd720 for 1080 same thing.

aber warum sind von jedem Bild mehrere verschiedene Größen bzw. Pixel-Größen vorhanden ?

Wordpress generiert selbst schon 3 Varianten ausser der Hochgeladene Version.
Ein Kleines, welches als Thumbnail für viele Dinge herhalten muss, aber auch einen mittlere Auflösung.
Enfold nun hat für seine vielen unterschiedlichen Alb Elemente (Masonry, Galerie, etc. pp) auch Versionsgrößen, die es vom System generieren lässt.

in der für den von ihm verwendeten Monitor bzw. der Auflösung passend angezeigt wird

Enfold verwendet noch nicht das srcset Feature. Wird aber wohl (eventuell schon im nächsten Update) kommen. Da ist es in der Tat dann so, dass je nach Bildschirmweite aus dem Set das nächstliegende Format angezeigt wird.

1. Man kann automatische Updates zulassen ( ist wohl default so, ich bevorzuge allerding manuell veranlasste Updates – überall auch WordPress).
1a. mittlerweile gibt es ein schönes Plugin (Update Theme and Plugins from Zip File) – das ist wirklich einfach zu handhaben.
2. siehe 1
3. getrennt – weil ja auch die Updates zB von einander abhängig sind.
Enfold reagiert zB auf WP Updates etc. die Plugins dito.
4. CDN : das streiten sich die Geister – Google findet es garnicht gut glaube ich gelesen zu haben. Ich finde es könnte sinnvoll sein. Für kleine Seiten gibt es da auch schon kostenfreie ( da Volumenabhängig ) Anbieter (Cloudinary)
4a. Stell dir nur mal vor, du hast große Filme und möchtest die nicht über Youtube laufen lassen. wenn dann der Film physikalisch auf so einem CDN liegt belastet das Abspielen nicht deine Serverperformance von WebGo.
6. Wenn du die Einstellung der Webseite machst nimm den SSD Festplattenspeicher für die Seite. Der Space ist eigentlich immer genug. Arbeitsspeicher ist da schon wichtiger.
7. Kommt auf den Traffic an, den deine Seite generiert. wenn 2 Besucher gleichzeitig einen selbstgehosteten Film angucken ists wohl nie ein Problem, wenn 1000 dies tun schon.

11. Kommt immer aufs Bild an. Wenn ich das aus Photoshop rauslaufen lasse (für Web speichern), sehe ich mir die Vorschau genau an. Es ist nun die Frage ob es auf das letzte Quäntchen Schärfe ankommt oder nicht. Oft sind sogar monochrome Verläufe schwerer darzustellen als kontrastreiche Bilder.
11a. Hier gleich zu einem Enfold “Problem” – beim Hochladen der original Bilder werden diese entpackt (jpgs sind ja prinzipiell auch nur komprimierte Dateien) dann auf das Enfoldformat beschnitten und dann allerdings ohne Komprimierung gespeichert 100% jpgs.
das kann man mittels eines Snippets in der functions.php des child-themes allerdings ändern.
12. Schau dir mal die Seite gtmetrix.com an. Dort lasse ich mir die Seiten auslesen. Geschwindigkeitswerte und dort gibt es auch schon gute ansätze wo man Performance Probleme hat.
So ist ein genereller Fehler – nicht zu überprüfen ob der Hoster überhaupt gzip (mod_deflate) aktiviert hat. Oft ist es einem selbst überlassen den Server dazuzubewegen. ZB über die htaccess datei im Root Verzeichnis.

Dear forcetechnology2 – if you got a solution – share it: you see that there is another participant which needs help too – maybe you can help…

anyway. WPML got for each language its own Enfold Settings Dialog. And so even Quck CSS could be different. You can see it on top there is a new menu for wpml.
So you have to synchronize the settings on each language you want to be installed.
So my advice to all wpml users is – first do all stylings and content input. then goto synchronize the languages on each “Enfold”

You can do that on exporting Enfold Settings file of Standard Language. Change to the new language and import there the settings file.

Jetzt sehe ich dein png file – wenn du es mit weniger transparentem Raum drum herum hochlädst ist es größer.
Das Padding kann man dann nachher einstellen.

Bitte installiere mal folgendes Plugin: svg support
Aktiviere es und lade dann mein svg hoch und setze dieses als logo ein.

Danach schaue ich mir deine Seite an.

Wie gesagt – ich fragte ob du wirklich Mobile Geräte Meinst oder eben kleine screenweiten

Der Code oben ist nur für Mobile Endgeräte gedacht. Nicht für kleine Screenweiten !
Also schau dir deine Seite dann bitte auf deinem Handy oder Tablett an, dort den Geräte Cache leeren.
Und in Enfold eventuell wenn du es aktiviert hast das Merging erneuern.

Um ganz sicher zu gehen setze mal die Anweisung auf important:

.avia_mobile #header_meta {
  display: none !important;
}

hier steht ja schon mal in der Dokumentation einiges dazu – ausserdem kannst du dort ein vorbereitetes Child-Theme laden.
https://kriesi.at/documentation/enfold/child-theme/
Prinzipell würde ein Child-Theme nur aus einem File bestehen, nämlich einer style.css in der der Verweis auf das Eltern Thema ist.
Meist wird noch ein Preview png /oder jpg dabei gelegt, damit man in der Themenauswahl auch ein Bildchen sehen kann. Weshalb wir hier noch eine functions.php dabei haben wird dir später auch noch bewusst.
Die style.css des Child beinhaltete wie die functions.php noch keine richtigen Inhalte.
Die style.css sieht im oberen Bereich so aus, dass WordPress weis, auf welches Eltern Theme es zurückgreifen soll:

/*
Theme Name: Enfold Child
…
Template: enfold
*/

wichtig hierbei im auskommentierten Bereich sind also diese beiden Teile. Der Name ist beliebig wählbar.
Das Template: enfold gibt das Eltern Thema an.

Das Eltern Thema liefert Alles zum Betrieb des Systems. Das Kind Thema dient dabei nur Veränderungen so zu speichern, dass Updates das Eltern Thema betreffend Veränderungen die dem Kind Thema gegeben wurden nicht überschrieben werden.

Die Functions.php ist in WordPress eine zentrale Datei, und auch gleich eine Besonderheit.
Obwohl ja nun Eltern- als auch Kind-Thema beide eine functions.php haben, überschreibt die ein Datei nicht die Andere.
Wenn du zB eine header.php im Kind Thema hast ist das so. Nur bei der functions.php werden Informationen dem Eltern Thema hinzugefügt.
Wenn man was im Eltern Thema innerhalb der functions.php überscheiben will geht das – bedarf aber der dafür vorgesehenen Form.

All die kleinen “Snippets” hier an Board, die einem helfen sollen das Aussehen oder die Funktion von Enfold zu verändern kommen oft dort hinein.
Einer dieser Standard Einträge die ich dort ( child-theme functions.php) immer habe ist zB:

function admin_head_mod() {
  echo '<style type="text/css">
  #avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%}
  #avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important}
  .avia_footer_links li {float: left;padding-right: 20px}
  .avia_footer .avia_footer_save {float: left}
  .avia_reset {pointer-events: none !important }
  #avia_options_page { max-width: 3000px!important}
  </style>';
}
add_action('admin_head', 'admin_head_mod');

hier kannst du schön sehen, wie so ein Kind Thema jetzt agiert:
Dieser kleine Code Schnipsel sorgt dafür, dass das Optionen Feld bei Enfold die Screenweite voll ausnutzt, und das Quick CSS Eingabefeld auch die Volle Breite bekommt. Diese Veränderung betrifft also in dem Fall zwar nur das Backend von Enfold hilft mir aber ein schöneres Look and Feel zu haben.
Beim nächsten Update von Enfold geht dieser Eintrag nun nicht verloren, weil ja nur das Eltern Thema : functions.php überschrieben wird.

Wie würde ich nun an deiner Stelle vorgehen. :
Besorge dir die Daten für deinen Neuen Hoster bezüglich :

Datenbank-Name
Datenbank-Passwort
Datenbank-Host ( viele haben dort nur local-host stehen, bei Strato stand dort aber etwas anderes: rdbms.strato.de) also auch das WebGo erfragen. Normalerweise steht da :

/** Ersetze localhost mit der MySQL-Serveradresse */
define('DB_HOST', '');

Diese Daten änderst du in deiner heruntergeladenen wp-config.php
Alles Andere dort kann so bleiben.
Sollte dort der Standard Tabellen Präfix wp_ benutzt werden ändere den auch noch. Dir wird was einfallen z.B. ae19_

1) lade das Verzeichnis nun mit der veränderten wp-config hoch (per ftp) zu deinem neuen Hoster Rootverzeichnis.

2) rufe deine Domain auf. – hier wird nun so alle Daten in der wp-config richtig waren die Initialisierung des WordPress veranlasst.
2a) Gib nun also dein die Installation betreffenden Daten ein ( wie die Seite heißen soll – dein Nick – dein Passwort (bitte notieren))

3) aktiviere ( das mit dem Child-Theme nehmen wir uns später vor) nun Enfold und schau ob dort die Einstellungen soweit denen entsprechen, was du vorher eingestellt hast ( also Farbschema und quick css Einträge)

4) Leider ist nun auch die Mediathek leer – obwohl ja die Dateien oben sind! ( Weil du ahnst es schon diese Infos in der Datenbank stehen)
– es gibt zwar ein Plugin (Add from Server) – welches das angebelich gut kann, aber
4a) wenn es nicht allzuviele Dateien sind lade Sie am besten neu hoch. Vorher solltest du das Verzeichnis wp-content/uploads dahingehend bereinigen. hier – bitte keine Enfold Sachen ( weist schon : avia_fonts und dynamic_avia ) löschen nur das was du hochgeladen hast. Wenn du vorher in Jahres und Monatsbasierten Ordnern hochgeladen hast befinden sich diese Dateien in 2019/2018 etc

– wenn du hier soweit bist gib bescheid, dann geht es weiter.

do you have a different font ( and font-name ) too?

Ich sehe die Einbindung als data img – wie hast du das hochgeladen?

Das scheint mir nur als svg abgespeichertes Format zu sein, was ein png eingebettet hat.

Warum nicht als echtes svg hochladen?

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

Enfold hat dieses Input Feld auf : Enfold (Child) – Allgemeines Styling : Quick CSS

dort kann man den Code eintragen.

PS : großer Vorteil inline svg – man kommt an viele Sachen via css dran um zB – füllfarben zu beeinflussen

gib mal zB ein:

svg:hover .cls-1 {
    fill: aqua;
-webkit-filter: drop-shadow(1px 1px 3px #333);
    filter: drop-shadow(1px 1px 3px #333);
    transition: all 0.5s ease;
}

und schau was beim hovern mit deinem Schwimmer passiert.

Ersetze doch mal bitte genau dieses Bild . – dann sehen wir weiter

wie gesagt, manch ein Browser benötigt dafür die Angabe der Größe (nicht in relativen Größen) des svgs via quick css

hast du denn erfolgreich ein svg hochladen können ( das wäre nämlich der Punkt mit dem Mime typ svg)
wenn ja dann solltest du es auch schon wählen können im Enfold Dialog als Logo.

Dann ist es zunächst aber nur als <img src=” ….blabla.svg” als logo eingesetzt.
Auch hier gib doch mal eine nicht relative größe des logos vor. Und schau was passiert:

.logo img {
width: 450px
}

das mit dem Inline svg kommt dann – wenn wir diese erste Hürde genommen haben.

Hast du einen Link wo ich mal schauen kann?