✔ Finde Fehler beim Reponsiven Design nicht?

[Shorty1968]

Hallo,
ich habe für meinen Shop ein Reponsives Design erstellt das auch soweit über all hin haut,es gibt Drei bereiche da wird es nicht Reponsiv angezeigt und ich kann die Ursache nicht finden.

https://schnaepchenpiet.shop/login.php

https://schnaepchenpiet.shop/create_account.php

https://schnaepchenpiet.shop/reviews.php

https://schnaepchenpiet.shop/account.php

Ich habe die Templates alle gleich aufgebaut,wo könnte der Fehler liegen?

 

[Sempervivum]

Was meinst Du denn genau mit "drei Bereiche"? Was genau funktioniert nicht? Das sind jetzt vier Links. Tritt der Fehler auf allen vier Seiten auf?

 

[Shorty1968]

Ja die Links habe ich Gepostet damit man sehen kann wo es nicht Reponsiv angezeigt wird.

 

[Sempervivum]

Und was genau funktioniert jetzt nicht?

 

[Shorty1968]

Im Firefox gibt es ja die möglichkeit,die Bildschirm grösse zu Testen und wenn ich bei den links das mache wird es nicht Reponsiv dargestellt und ich kann dortd en fehler nicht finden.

 

[basti1012]

Was man in Firefox da testen kann stimmt aber leider auch nicht immer. Aber in diesen Fall wohl schon. Wenn man das Fenster zusammen schiebt bleibt dein Content ja breit und das willst du wohl nicht haben oder.
Ein Problem wird wohl das sein.

#col_full {
    width: 1000px;
}

weil eine feste breite wird wohl nie responsiv ohne JS.

Aber ich könnte auch falsch liegen. Sehe das sempervivum dir schon hilft ,der wweiß das aber besser und wird dir besser helfen können.

Aber zu deinen Shop muß ich sagen das er immer schöner wird.
Hast du gut gemacht

 

[Shorty1968]

Aber zu deinen Shop muß ich sagen das er immer schöner wird.
Hast du gut gemacht

Vielen dank aber da habt ihr mir bei geholfen und dafür bin ich euch dankbar,ich hoffe das Repo Problem auch noch gelöst zu bekommen.

*EDIT*
Deine vermutung war richtig nach dem ich es wie folgt geändert habe scheint es zu gehen vielen dank.

#col_full {
width:100%;
position: relative;
}

 

[Shorty1968]

Ich muss mich doch noch mal melden,im Firefox sieht das Reponsive sehr gut aus aber ich habe mir den Shop nun mal auf einem Samsung Galaxy Prime angeschaut das sieht es auch Reponsiv aus,aber die Logos werden da nicht so zusamen geschoben wie im Firefox.

Jemand eine Idee woran das liegt?

 

[Sempervivum]

Ich habe es mir auf meinem Samsung S4 angesehen und kann es auch durch Zusammenschieben des Browserfensters reproduzieren. Es liegt daran, dass die Logos zu groß sind und nicht mehr in das Fenster passen. Lösung:
display:flex für den umgebenden Container.
Die Bilder mit einem div wrappen, sofern nicht schon das a-Tag da ist und als Wrapper dienen kann.
flex: 0 1 auto für diese Container.
width:100% für die img-Tags darin.
Dann werden die Bilder kleiner, wenn das Fenster zu schmal ist:

 

[Shorty1968]

Ich verstehe nicht ganz wie und was du meinst das display: flex ist ja schon in dem CSS enthalten.

#layout_logo {
background-color:#932527;
padding:0px 0px;
width:100%;
max-width:1900px;
margin: 0px auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: -30px;
display: flex;
flex: 0 1 auto;
align-items: center;
justify-content: space-around;
}
#logo {
margin: 50px 0 -30px 400px;
width:265px;
height:75px;
width:100%;
}
#logo img {
margin: 0px auto;
vertical-align:bottom;
width:100%;
height:auto;
}
#logo a {
display:block;
outline:none;
text-decoration:none;
}

Code html

<div id="layout_logo" class="cf">
    <a href="{$index}" title="{#link_index#} &bull; {$store_name}"><img src="{$tpl_path}img/logo_head.png" alt="{$store_name}" /></a>
    <img src="{$tpl_path}img/freeShipping.png" alt="" />
    <img src="{$tpl_path}img/sslLogo.png" alt="" />
  </div>

Was ich auch nicht verstehe so wie es nun ist wird es im Firefox Bildergrössen Testen richtig dargestellt warum ist das auf dem Smarthphone nicht so?