Hallo liebe Community und Siquando Experten,
Ich möchte bei dem Absatz Schwebende Bilder die Absatzbreite bei Mobiler Ansicht reduzieren.
Diese wird mir auf die gesamte Seitenbreite angezeigt und ich möchte gerne links und rechts 20px Rand haben.
Die Code Zeilen (Original) sind :
<div class="sqrmobilefullwidth "> <a class="ngpar" id="ngparw7e770e10000d5105460264680303180"></a> <div class="paragraph" style="margin-bottom:30px;"><div class="ngparafloatingpictures" style="padding-bottom:56.250%" data-depht="50" data-delay="7" data-textsize="3"> <img src="../../../../images/pictures/bodenbelaege/slider/vinylboden/el-torro/flaechen-fotos/Modico%20El%20Torro%20Saragossaeiche%20rustik.jpg?w=1100&h=618&r=6" alt="" style="visibility: visible; transition: opacity 2s ease 0s, transform 9s linear 0s; transform: scale3d(1.5, 1.5, 1); z-index: 1; opacity: 1;"> <img src="../../../../images/pictures/bodenbelaege/slider/vinylboden/el-torro/flaechen-fotos/modico-el-torro-saragossaeiche-rustik_schraeg.jpg?w=1100&h=618&r=6" alt="" style="visibility: visible; opacity: 1; transition: opacity 2s ease 0s, transform 9s linear 0s; transform: scale3d(1.5, 1.5, 1); z-index: 0;"> </div></div> </div>
Wenn ich eine CSS Anweisung in den Head meiner Seite packe wie z.B.
/* Schwebende Bilder Versatz Anpassungen */ @media screen and (max-width: 1024px) {.ngparafloatingpictures {padding-left: 20px; padding-right: 20px}} /* Ende */
bekomme ich leider nicht das gewünschte Ergebnis.
Wenn ich .sqrmobilefullwidth anspreche dann bezieht sich das padding auf ALLE Absätze der Seite und nicht nur auf den Absatz Schwebende Bilder.
Ich rätzle nun wie ich .sqrmobilefullwidth und .ngparafloatingpictures als genaues Ziel für die padding Anweisungen definieren kann.
Also wenn .ngparafloatingpictures dann bei sqrmobilefullwidth den Wert padding-right : 20px und padding-left : 20px einsetzen wäre so denke ich die Anweisung.
Die ID des Absatzes möchte ich nicht ansprechen. Am liebsten möchte ich das in den HEAD unter Website-Eigenschaften packen damit sich das immer auf einen solchen Absatz bezieht global egal auf welcher Seite dieser verwendet wird.
Manuell komme ich zu dem richtigen Ergebnis wenn ich in die Zeile "div class="paragraph" die zwei Werte eintrage ...
Also wenn das so aussieht :
<div class="paragraph" style="margin-bottom:30px;padding-right: 20px;padding-left: 20px;"><div class="ngparafloatingpictures" style="padding-bottom:56.250%" data-depht="50" data-delay="7" data-textsize="3"> <img src="../../../../images/pictures/bodenbelaege/slider/vinylboden/el-torro/flaechen-fotos/Modico%20El%20Torro%20Saragossaeiche%20rustik.jpg?w=1100&h=618&r=6" alt="" style="visibility: visible; transition: opacity 2s ease 0s, transform 9s linear 0s; transform: scale3d(1.5, 1.5, 1); z-index: 0; opacity: 1;"> <img src="../../../../images/pictures/bodenbelaege/slider/vinylboden/el-torro/flaechen-fotos/modico-el-torro-saragossaeiche-rustik_schraeg.jpg?w=1100&h=618&r=6" alt="" style="visibility: visible; opacity: 1; transition: opacity 2s ease 0s, transform 9s linear 0s; transform: scale3d(1.5, 1.5, 1); z-index: 1;"> </div></div>
Kann mir bitte jemand bei diesem Problem helfen???
Dankeschön vorab für eure Ideen und Ratschläge.