Position nach Darstellungsbreite

  • Hallo Community,


    ich knabbere an einem spannenden Problem, leider habe ich von CSS so gar keine Ahnung, weshalb ich hier Hilfe suche.


    Ich möchte die Darstellung eines Bildes neben einem Produkttext ändern und zwar in Abhängigkeit von der Darstellungsbreite.


    Ich habe durch ausprobieren folgende 2 Zeilen aus der CSS-Datei als für mich wichtig heraus gepickt:


    CSS
    .pindex_list .pindex_product .pindex_pic { float:left; margin-right:15px; }
    .pindex_list .pindex_product .pindex_content { margin-left:215px; }


    Kann in dieser CSS-Datei angegeben werden, dass die Zeilen bei einer Darstellungsbreite von unter 800px folgendermaßen dargestellt werden?


    CSS
    .pindex_list .pindex_product .pindex_pic { margin-left:15px; }
    .pindex_list .pindex_product .pindex_content { margin-left:15px; }


    Aus float:left; margin-right:15px; wird also margin-left:15px; und aus margin-left:215px; wird margin-left:15px;


    Irgendwie geht das wohl mit Media-Queries, aber ich habe wirklich null Plan, wie das in CSS funktioniert.


    Ist das eher ein Zweizeiler, oder ist das komplizierter?


    Danke für eure Hilfe im voraus.

  • Ja, ist im wesentlichen ein Einzeiler:


    .pindex_list .pindex_product .pindex_pic { float:left; margin-right:15px; }
    .pindex_list .pindex_product .pindex_content { margin-left:215px; }
    @media only screen and (max-width: 799px) {
    .pindex_list .pindex_product .pindex_pic { margin-left:15px; }
    .pindex_list .pindex_product .pindex_content { margin-left:15px; }
    }


    (Forensoftware verschluckt konsequent die Zeilenumbrüche, daher ohne Code-Tags und Einrückungen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!