Responsives Webdesign

Um zu prüfen, ob sich das Layout wo wie gewünscht anpasst, soll sich die Hintergrundfarbe wie folgt ändern:

Tabelle zentriert und 60% des Bildschirm breit

Bildschirmbreite bis 400 px: rosa Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

Bildschirmbreite bis 600 px: türkis

Bildschirmbreite bis 760 px: gelb

Bildschirmbreite bis 980 px: lila

Bildschirmbreite bis 1024 px: orange

Bildschirmbreite bis 1260 px: ocker

Bildschirmbreite über 1380 px: blau

Dummy-Test

Da es sich um ein einspaltiges Layout handelt, ist der .content nicht fließend. Wenn Sie einen .footer innerhalb des .container hinzufügen, steht er lediglich hinter dem div-Tag .content.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?