Auf mobilen Geräten wird die Kopfgrafik abgeschnitten

bystonemedia

Liebe Gemeinde,

ich nutze das Theme Goldengate und habe auf allen Browsern eine vernünftige Darstellung.

Auf Pads und Smartphones wird allerdings die Grafik oberhalb des Contents mittendrin abgetrennt, lila Fläche.

Die zugehörige Teil der CSS lautet.

/* Logo */
#logo
{
margin:0;
padding:0;
background:#2f2046;
border:#2f2046 1px solid;
overflow:hidden;
border-top:#468 5px solid;
border-bottom:#468 5px solid;

}
#logo div
{
width:960px;
margin:0 auto;
padding:5px 0;
}
#logo a {
border: none;
text-decoration: none;
}
#logo h1 { font-size:2.4em;}
#logo * { color:#eef;}
#logo p { font-style:italic;}
#social
{
display:inline;
float:right;
margin:5px 0 0 0;
padding:0;
}
#social a
{
border:0;
display:block;
float:left;
margin:0 5px;
padding:0;

}

Auch wenn ich das overflow:hidden; auskommentiere wird abgeschnitten.

Wer kann helfen?

Danke

Alex

Werbepost

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

egado

Huhu,

versuch mal bitte folgendes:

Code

#logo div 
{


    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    overflow: hidden;
    padding: 5px 0;
}




#menu
{
    background: #5F7DC6;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
}




#menu ul 
{
    line-height: normal;
    list-style: none;
    margin: 0 auto;
    max-width: 980px;
    padding: 0;
    width: 100%;
}

Alles anzeigen

Ich kann es gerade nur nicht testen, also keine Garantie ;)

bystonemedia

Hi egado,

habe es ebend probiert. Im ipad geht es jetzt :smile: im iphone noch nicht, wir nähern uns an. :-)

danke.

alex

egado

Kein Problem :)

Habe gerade mal per Adobe Edge Inspect nachgeschaut, also bezüglich iPhone. Es scheint an deinem Meta-Eintrag

Code

[COLOR=#881280][FONT=monospace]<meta [/FONT][/COLOR][FONT=monospace]name[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]viewport[/FONT][COLOR=#881280][FONT=monospace]" [/FONT][/COLOR][FONT=monospace]content[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]initial-scale=1.0, user-scalable=yes[/FONT][COLOR=#881280][FONT=monospace]" /> [/FONT][/COLOR]

im

Code

<head>

zu liegen. Denn wenn man genau hinsieht, ist der Header nur so breit wie die Ansicht nach einem Seiten-Reload auf dem iPhone. Ich kanns nicht ohne diesen Tag richtig testen, aber probiers mal ohne aus... ohne Responsive Layout sorgt der in dem Fall dafür das in eine 1:1 Ansicht gesprungen wird, die Seite ist darauf aber nicht ausgelegt.

Weiterhin befindet sich im <head> eine JavaScript für eine Auflösungserkennung... was das aber genau tut kann ich dir nicht sagen und woher die stammt ebenfalls nicht... So sieht es jedenfalls im Remote-Quelltext aufm iPhone4 aus...

HTML

<script type="text/javascript">
//<![CDATA[
    var screen_res = "320 x 480"; 
//]]>
</script>

Viel Erfolg ;)

bystonemedia

Danke! Doch leider kann ich den Meta Eintrag nirgends finden, nicht in der header.php, habe alle dateien durchsuchen lassen, wurde nicht gefunden. Komisch.

Alex

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Auf mobilen Geräten wird die Kopfgrafik abgeschnitten

Jetzt mitmachen!