Blockquote außerhalb vom Textfluss positionieren

Moin,

ich möchte Blockquotes ähnlich diesem Vorbild hier bauen:

https://www.wired.de/collection/lif…us-legend-zelda

Das prinzipielle Vorgehen ist mir klar, mit einen -margin bekomme ich auch den Blockquote schon nach lnks gezogen. Dann habe ich aber das Problem, dass er beim responsive design sich nicht neu anordnet für geringe Auflösungen, sondern dann einfach nach links aus dem Bild rausragt. Hat das jemand schonmal gemacht? Das gleiche Problem habe ich auch bei Bildern, wenn ich mit -margin arbeite.

[FONT=Consolas][COLOR=#888888]media="all"
[/COLOR]

[COLOR=#888888][COLOR=#222222]blockquote[/COLOR][/COLOR] {
[/FONT]

• [COLOR=#C80000]padding[/COLOR]: 10px 20px;
• [COLOR=#C80000]margin[/COLOR]: 0 0 0 -120px;
• [COLOR=#C80000]font-size[/COLOR]: 17.5px;
• [COLOR=#C80000]border-left[/COLOR]: 5px solid #eee;
• [COLOR=#C80000]position[/COLOR]: relative;
• [COLOR=#C80000]float[/COLOR]: left;
• max-width:480px;

[FONT=Consolas]}[/FONT]

Das heißt ich lege einen Media Query an bei, sagen wir 1000px, bei dem ich all die Elemente wieder aufhebe? Oder verringere ich dann den Margin bis es passt?

Also es ist mir erfolgreich gelungen für den LINKEN pullquote. Jetzt wollte ich den code direkt auf den rechten pullquote übertragen - ohne Erfolg. Er sitzt zwar rechts korrekt, aber float funktioniert nicht, der Text läuft in den Quote rein. Hat jemand eine Ahnung wieso?

/* Blockquote Position */
blockquote {padding: 10px 20px;border-left: 5px solid #C11E56;position: relative;margin-left: -14%; float: left;max-width:380px;clear:both;}
.single-page .the-content blockquote p {font-family:"Rajdhani" !important;font-size:22px;font-weight:700;line-height:1.4em;}
.single-page blockquote {border-color:#C11E56;}
Media only screen and (max-width: 900px) {blockquote {padding: 10px 20px;margin: 0 0 10px 0px;float: none;max-width:none;}}

blockquote.pull-right {padding: 10px 20px;position: relative;margin-right: -14%; float: right !important;max-width:380px;clear:both;}
.single-page .the-content blockquote p {font-family:"Rajdhani" !important;font-size:22px;font-weight:700;line-height:1.4em;}
.single-page blockquote {border-color:#C11E56;}
Media only screen and (max-width: 900px) {blockquote.pull-right {padding: 10px 20px;margin: 0 0px 10px 0px;float: none;max-width:none;}}