Finde Fehler beim Reponsiven Design nicht?


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Shorty1968

Erfahrenes Mitglied
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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.
Code:
#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 (y)
 

Shorty1968

Erfahrenes Mitglied
Aber zu deinen Shop muß ich sagen das er immer schöner wird.
Hast du gut gemacht (y)
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.
CSS:
#col_full {
width:100%;
position: relative;
}
 

Shorty1968

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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:
schnaepchenpit.png
 

Shorty1968

Erfahrenes Mitglied
Ich verstehe nicht ganz wie und was du meinst das display: flex ist ja schon in dem CSS enthalten.
CSS:
#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
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?
 

Anhänge

Sempervivum

Erfahrenes Mitglied
Kann ich nicht erkennen. Nur bei dem schmalen Footer verschwinden Elemente am unteren Rand, wenn sie umgebrochen werden.
Beschreibe mal genauer, wo etwas verdeckt wird.
 

Sempervivum

Erfahrenes Mitglied
Bei "Unser Preis" liegt es daran, dass das span ein max-width: 50px; hat. Löscht man das, werden die Wörter nebeneinander angezeigt:
schnaepchenpiet2.png
 

Shorty1968

Erfahrenes Mitglied
Ich noch mal mir sind die Popups noch aufgefallen,die werden auch nicht Reponsiv angezeigt wenn ihr in einem Artikel auf "Artikeldatenblatt drucken" und "Frage zum Artikel" das Popup Fenster auf Reponsiv umstellt wird es nicht Reponsiv verkleinert.
 

Sempervivum

Erfahrenes Mitglied
Offenbar verwendest Du hier colorbox. Du könntest versuchen, die Abmessungen des iFrame vom Browserfenster abhängig zu machen:
Javascript:
    $(".iframe").colorbox({iframe:true, width: window.innerWidth * 0.8 , height: window.innerHeight * 0.6, maxWidth: "90%", maxHeight: "90%", fixed: true});
(ungeteste) Evtl. noch etwas ausgefeilter berechnen, so dass deine Standardgröße nicht überschritten und nur bei Bedarf verkleinert wird.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge