#1

deckewandboden

Mitglied  (42 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

Ich möchte bei dem Absatz Schwebende Bilder die Absatzbreite bei Mobiler Ansicht reduzieren

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.

Beispielseite des Problems

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&amp;h=618&amp;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&amp;h=618&amp;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&amp;h=618&amp;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&amp;h=618&amp;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.

#2

deckewandboden

Mitglied  (42 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

Ich habe die Lösung gefunden und würde diese Thema gerne wieder löschen. Kann mir jemand sagen wo und wie das geht? Dankeschön

#3

W2D Fan

Co-Administratorin  (4570 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Löschen können nur die Admins, aber hier wird nichts gelöscht wenn nicht unbedingt notwendig.

Hilfreicher wäre es wenn du die Lösung hier hinschreiben würdest damit andere User mit einem ähnlichen Problem auch geholfen werden.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#4

deckewandboden

Mitglied  (42 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.decke-wand-boden.de

 Die Lösung ist eigentlich so einfach, wie es anders gar nicht geht ...

Absatz Eigenschaften die Breite (responsiv) auf 100 % und maximal auf 1100 Pixel Ausrichtung zentriert.

... und das war es auch schon 🙂

1413 Aufrufe | 4 Beiträge