Antworten auf deine Fragen:
Neues Thema erstellen

Mobile Viewport (Android) Cutted width:100%;

Daniel_Knecht

PSD-Mitglied

Hallo,
ich hab ein Problem mit meiner Website Darstellung auf Mobile Geräten.
Und zwar werden meine (hier der Footer) Div´s mit 100% width einfach gecutted so das diese nicht bis zum Rechten Bildschirm rand gehen.

Hier die CSS vom Footer:
Code:
#footer {
    background: #fff;
    position: absolute;
    width: 100%;
    height: 140px;
    left: 0;
   
    border-top: 1px solid #d8d8d8;
}
    .footer_top {
        width: 1240px;
        height: 40px;
        margin: 0 auto;
        padding: 20px 20px 0 20px;
       
        border-bottom: 1px solid #d8d8d8;
       
        font-family: SegoeL, Arial;
    }

Hier auch mal die 2 Beispiele in Bildern. Bild 1 ist die Desktop-Version und Bild 2 die Version auf meinem Tegra NOTE 7 Tablet (Android).



Ich hab schon gegoogelt nach Mobile Device Viewport etc. doch keine Lösung funktioniert irgendwie :(
Hoffe ihr könnt mir helfen.
 

tr4ze

Mod | Forum

Teammitglied
PSD Beta Team
Tags nicht richtig geschlossen im Html ?
Wenn ich mir die floats da unten so anschaue ist das meine erste Vermutung.
Mehr kann man ohne Quellcode nicht sagen.
 

Daniel_Knecht

PSD-Mitglied

Alles Korrekt geschlossen.
Das ist der gesamte Footer-Div:
Code:
<div id="footer">
        <div class="footer_top">
            <div class="fb-like" data-href="http://home-of-stolle.de" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
            <g:plusone size="medium" href="http://home-of-stolle.de" count="true"></g:plusone>
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://http://home-of-stolle.de" data-via="DanielDerStolle" data-lang="de">Twittern</a>
            <div class="g-ytsubscribe" data-channelid="UC6u-H6aleKtxSHtaoc-d1Yg" data-layout="default" data-count="default"></div>
        </div>
    </div>
 

tr4ze

Mod | Forum

Teammitglied
PSD Beta Team
Ok, ich kann hier zwar nicht prüfen mangels Androidgerät, aber ich tippe auf denn Google+ Button.
Laut Manual von Google besitz dieser eine align Eigenschaft welche nachträglich per javascript realisiert wird.
Auf dem Screenshot sieht es danach aus als ob der Float vom Googlebutton gecleared wird.
Zwei Lösungsversuche würde ich mal testen.

1.align im button auf left setzen
HTML:
<g:plusone size="medium" align="left" href="http://home-of-stolle.de" count="true"></g:plusone>

Sollte das nicht funktionieren

2. Wrapper um denn Button, und diesen(denn Button nicht denn Wrapper) mit einem Clearfix aus dem Float nehmen.
 

Daniel_Knecht

PSD-Mitglied

Also die Breite des Footers habe ich nun mit einer width von 1280px hin bekommen (so breit ist der Content auf der Seite.
Aber die Buttons im Footer bleiben egal was ich tue immer so komisch verschoben (Auf Desktop klappt wie gesagt alles).

Ich habe aber das Gefühl das es an dem Facebook Button liegt.

Edit:
So... nachdem ich bei allen Buttons den Count raus genommen habe und noch mal versucht habe diese in eigene Div´s zu setzen klappt es. Hier noch mal ein Bild vom Android Display:
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben