Naja, da ja deine Kuh ab einer Bildschirmbreite von 768px offensichtlich stimmt, ist ja in diesem Bereich das responsive Design ok.
Du hast ja auch eine responsive.css in de man das mit dem Browserentwicklertool vieles finden kann.
Browserentwicklertool grundsätzlich: (entweder F12 oder Maus auf das Objekt deiner Begierde - rechte Maustaste - Element untersuchen :cool:
Da gibts auch jede Menge im Netz, um sich das anzusehen ......
Quick and dirty - in Zeile 352 der responsive.css findet man -
@media only screen and (min-width: 768px)
ich habe das mal einfach auf 268px geändert und siehe das der Kuh gefällt das.
Weiters könnte man in Zeile 663 die Hintergrundfarbe von weiß auf dein grau ändern:
.mobile-tr-header #Action_bar {
background-color: #2C2C2C !important;
}
Da diese Action_bar ab 321px 3-zeilig wird könnte man folgendes ändern:
.section_wrapper, .container, .four.columns .widget-area {
padding-left: 0px !important;
padding-right: 0px !important;
}
Das !important ist die Keule, da ich nicht suchen kann (weil Kauftheme!) oder will wo diese Dinge letztendlich herkommt.
Ob diese Änderungen sonst irgend etwas auslösen muß du einfach testen!!!
Jetzt kommts - diverse CSS-Änderungen werden nicht in den original Dateien vorgenommen, da das beim nächsten Updast wieder geschichte ist!
CSS Anpassungen weden in den Zusätzliche CSS oder Custom CSS gemacht! Meist im Dashboard unter Design - Customizer - Zusätzliche CSS zu finden (oder in der documentation für dein Theme).
Und ich weiß das auch nicht so aus dem Handgelenk - mein Ansatz ist ˈlœːɐ̯nɪŋ baɪ̯ ˈduːɪŋ und da ist eine Stunde schnell verplämpert.
Suchmaschinen helfen ungemein!