Skip to main content
T
Technik01
Participant
February 12, 2018
Answered

Media queries verändern bei max-width die festgelegte Pixelgröße

  • February 12, 2018
  • 1 reply
  • 426 views

Hallo Zusammen,

ich hoffe sehr, dass ich hier mit Euch den Fehler finde.

Aktuell erstelle ich mit Dreamweaver CC 2018 eine HTML5 Website, die natürlich auch responsiv sein soll.

Dazu habe ich mehrere Container angelegt, header, nav, eine section, main, 4 articles innerhalb vom main und einen footer.

Alles bis auf die articles haben eine Breite von 945 px, die aricles haben eine Breite von 225 px plus margin right 15 px.

Das passt alles gut, bis ich die erste Medieanabfrage mit max-width 945 px hinzufüge und Selektoren hierfür anlege.

Die Selektoren entsprechen denen aus der CSS und die width habe ich entsprechend immer auf 100% gesetzt, die von den

articles auf 23% und das margin auf 2%

Was dann passiert, kann ich mir nicht erklären: Die width wird über den CSS-Prüfmodus dann auf einmal nur noch mit 928 px

angezeigt und die Container verkürzen sich auch optisch.

Habt Ihr eine Idee, was ich falsch mache? Wahrscheinlich ist das nur irgendeine Kleinigkeit...

    This topic has been closed for replies.
    Correct answer BenPleysier

    Without seeing the code, it is very difficult to see where it is going wrong. The best way to show the code is to upload the site to a (temporary) remote location and supplying the link.

    Please keep in mind that the best way to create a responsive layout is to start with an extra small (mobile) view first. No media queries are required at this stage.

    Once that is done, take it up to the next size (small) and create overriding style rules (from extra small) within a media query.

    Then take it up to the next size (medium) and create overriding style rules (from small) within a media query.

    Repeat the steps for large and extra large.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 13, 2018

    Without seeing the code, it is very difficult to see where it is going wrong. The best way to show the code is to upload the site to a (temporary) remote location and supplying the link.

    Please keep in mind that the best way to create a responsive layout is to start with an extra small (mobile) view first. No media queries are required at this stage.

    Once that is done, take it up to the next size (small) and create overriding style rules (from extra small) within a media query.

    Then take it up to the next size (medium) and create overriding style rules (from small) within a media query.

    Repeat the steps for large and extra large.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      T
      Technik01Author
      Participant
      March 5, 2018

      Dear Ben,

      thank you very much for your answer and your time you took for advicing me.

      I got it right now, even when I took the other way that I've learned in my lessons.

      But for my next page I'll have your advice in my mind and try it.

      If you are interested in the page you can see it on www.suesse-schachtel.de

      For the moment it is only the index, because we are still working on it.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices