Responsives design: rand bei Smartphones

    Hey Leute! Habe meine Site dem ipad bereits angepasst, Alles läuft und passt sich komplett dem Bildschirm. Beim iPhone jedoch habe ich einen lästigen Rand und man kann praktisch zur Seite scrollen. Dem Container die width 100% zu geben hat nichts geholfen und ich weiss nicht mehr weiter :(

    ich hoffe ihr konnt mir helfen!
    Site: http://www.dlld-fashion.de
    Gruss Deniz

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    teilweise durch den 'facebook like button' verursacht:

    PHP
    <p class="FacebookLikeButton"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdlld-fashion.de%2F&amp;layout=standard&amp;show_faces=yes&amp;width=450&amp;action=like&amp;colorscheme=light&amp;locale=de_DE" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height: 25px"></iframe></p>

    und zum anderen durch das 'left:20%;' hier:

    Code
    #mainNav{
 position:absolute;
 top:-30%;
 left:20%;
 }

    in diesem abschnitt:

    Code
    /* iPhone Landscape */
@media screen and (max-width: 700px) and (orientation: landscape) {

    Vielen vielen Dank für die schnellen antworten!

    Besteht denn die Möglichkeit, die Likebox und das Kontakt widget selektiv für die mobilen Versionen auszublenden?

    Ich muss sagen bei solchen Dingen endet mein Wissen leider.

    Und gibt es eine alternative Methode der Positionierung des Menüs? Wäre da ein margin-left in % möglich?

    Viele Grüße und vielen Dank im Voraus!
    Deniz

    Habe jetzt angefangen "aufzuräumen": Und zwar war die Navileiste in einem anderen Div und dann durch die ungünstige Formulierung -20% und -50% nach oben verschoben, habe das jetzt in den oberen Div Container gepackt. Facebook Like Box und Kontakt Widget sind deaktiviert.

    Und somit ist jetzt auch die Portraitansicht super - außer dass sich der Content inclusive Produkte irgendwie dezentriert hat.

    Die Landscapeansicht hat aber immer noch einen ganz kleinen Rand. :(

    Zitat von denizs

    Und somit ist jetzt auch die Portraitansicht super - außer dass sich der Content inclusive Produkte irgendwie dezentriert hat.

    Du solltest auch die Media Queries anpassen, sonst hilft das nicht viel. Die Einstellungen für den Landscape-Modus überschreiben das wieder... ;)

    Hey Monika!
    Das Gerät ist ein HTC Sensation XE, auf einem Galaxy S3 hast du aber auch einen Rand- beim Iphone meine ich auch.

    @formateins:

    Joa wäre auf jeden Fall mal eine Maßnahme :D
    Das Problem ist ich habe nur abends einen Rechner mit Firebug zur Verfügung und meine Kenntnisse sind leider (noch) nicht fortgeschritten genug, um praktisch eine "cleane" Positionierung durchzuführen. Gibts da eine Möglichkeit, die Sachen automatisch zu zentrieren?


    Bin halt noch so am lernen :oops:

    Ich muss auch mal schauen, wie ich am besten die Contents auf "Shop" und "Blog" vernüfntig nach links eingerückt bekomme die haben ja iwie keine margin aber da kopiere ich einfach selektiv für den Content wieder die Orginal CSS rein - habe halt anfangs den Fehler gemacht irgendwie wild rumzuspielen ohne die Struktur des Templates zu verstehen und das kommt gerade so ein wenig zurück
    :razz:
    :shock:

    (Beispiel mainNav einfach mit top:-20% nach oben gelegt, statt die Navigationsleiste in den richtigen oberen Container zu legen und somit halt Ränder hervorrufen)

    Iphone Media Query: Div Container zentrieren

    So, habe jetzt mal den alten Code eingesetzt, die Schriften und so weiter angepasst und es sieht schon viel besser aus :)

    Jetzt möchte ich eig nur noch die Container in der mobilen Ansicht also einmal #products.homeSection und #content.homeSection zentrieren.

    Kann mir jemand sagen wie ich das verfnünftig angehe, ohne weitere Baustellen aufzureißen? Oder muss ich gar einen anderen Container ansprechen als die beiden dort oben?

    :confused:

    Vielen Dank im Voraus! :)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden