Avatar billede alamakota Nybegynder
22. december 2014 - 14:39 Der er 2 kommentarer og
1 løsning

Responsive virker fint på mobil, men ikke optimalt på tablet

Hej Eksperter,

Jeg har fået opsat en responsive hjemmeside.
Og den virker egentlig fint nok, ihvertfald på computer og mobiltelefoner.

Det eneste problem jeg har er, at når jeg ser siden på en tablet, for eksempel Ipad, så rykker menuen sig ned, overover indholdet af siden.
Det er meningen at den bare skal blive eller switche over til hvordan det ser ud på mobil, altså dvs. de tre linjer som indikerer det er en menu.

Jeg håber i kan hjælpe mig med at finde problemet og enten fortælle hvordan jeg får menuen til at blive der, eller hvad jeg skal ændre i koden for at få menuen til at ændres til mobilversionen med de 3 streger.

I kan også se fejlen hvis i går ind på siden og begynder at trække i browservinduet for at lave det lidt mindre.
Siden er på: www.artcirklen.dk

Her er CSS koden som er knyttet til menuen.

På forhånd tak.

/* =Menu
-------------------------------------------------------------- */

/*** Structure ***/
#access {
    display: block;
    margin: 1.5em 0 0 35px;
    padding: 1.625em 0;
    float: right;
    line-height: 1.725;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#access ul,
#access ul * {
    margin: 0;
    padding: 0;
    list-style: none;
}
#access ul ul {
    position: absolute;
    top: -999em;
    width: 13em; /* left offset of submenus need to match (see below) */
}
#access ul ul li {
    width: 100%;
}
#access ul li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}
#access ul li {
    display: inline-block;
    position: relative;
    margin-left: 14px;
}
#access ul li li {
    margin: 0;
}
#access ul a {
    display: block;
    position: relative;

    -webkit-transition: color ease .2s;
    -moz-transition: color ease .2s;
    -o-transition: color ease .2s;
    -ms-transition: color ease .2s;
}
#access ul li:hover ul,
#access ul li.sfHover ul {
    left: 0;
    top: 30px; /* match top ul list item height */
    z-index: 2;
}
#access ul li:hover li ul,
#access ul li.sfHover li ul {
    top: -999em;
}
#access ul li li:hover ul,
#access ul li li.sfHover ul {
    left: 16.5em; /* match ul width */
    top: 0;
}
#access ul li li:hover li ul,
#access ul li li.sfHover li ul {
    top: -999em;
}
#access ul li li li:hover ul,
#access ul li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}

/*** Style ***/
.menu {
    max-width: 1441px;
    margin: 0 auto;
}
#access ul {
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
}
#access ul a {
    text-decoration: none;
    padding: 0;
}
#access ul a  { /* visited pseudo selector so IE6 applies text colour*/
    color: #919191;
}
#access ul li ul {
    background: white;
    padding: 0.8em 1em 0.8em 1em;
    border: 1px solid #ababab;
}
#access ul li li {
    background: none;
    text-align: left;
    text-transform: uppercase;
    padding: 6px 0;
}
#access ul li li li {
    background: none;
}
#access ul li a:hover,
#access ul li.sfHover > a,
#access ul .current-menu-item > a,
#access ul .current_page_item > a {
    color: #ffffff;
    outline: 0;
}
#access ul .menu-item-object-custom.current_page_item > a {
    color: #ffffff;
}
#access ul .menu-item-object-custom.current-menu-item  a:hover,
#access ul .menu-item-object-custom.current_page_item  a:hover {
    color: #cccccc;
}
#access ul li li:hover,
#access ul li li.sfHover,
#access ul li li.current-menu-item,
#access ul li li.current_page_item {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
#access ul li li a:hover,
#access ul li li.sfHover > a,
#access ul li .current-menu-item > a,
#access ul li .current_page_item > a {
    color: #ff7260;
}
#access ul li li a {
    font-size: 13px;
    font-weight: normal;
    padding: 0;

    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    -ms-transition: all ease .2s;
}
/*** Arrows **/
#access ul a.sf-with-ul {
    padding-right: 0.8em;
    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position: absolute;
    display: block;
    right: 0;
    top: 1.05em;
    overflow: hidden;
    text-indent: -999em;
    width: 0;
    height: 0;
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    border-top: 4px solid #111;
    font-family: Arial !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: white !important;
}
li li .sf-sub-indicator {
    width: 0;
    height: 0;
    right: .75em;
    text-indent: -999em;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #111;
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top: 0.95em;
}
li li a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top: 0.75em;
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    border-top-color: #ff7260;
}

/* point right for anchors in subs */
#access ul ul .sf-sub-indicator {
    border-top-color: #ff7260;
}
#access ul ul a > .sf-sub-indicator {
    background-position:  0 0;
    border-right-color: #ff7260;
    border-top-color: transparent;
    -webkit-transition: border-color ease .2s;
    -moz-transition: border-color ease .2s;
    -o-transition: border-color ease .2s;
    -ms-transition: border-color ease .2s;
}
/* apply hovers to modern browsers */
#access ul ul a:focus > .sf-sub-indicator,
#access ul ul a:hover > .sf-sub-indicator,
#access ul ul a:active > .sf-sub-indicator,
#access ul ul li:hover > a > .sf-sub-indicator,
#access ul ul li.sfHover > a > .sf-sub-indicator {
    border-left-color: #ff7260;
}


/* =Menu for mobile devises
-------------------------------------------------------------- */
#access-mobile {
    display: none;
    margin: 0 auto;
    text-align: left;
}
#mega-menu-dropdown {
    cursor: pointer;
    display: none;
    text-decoration: none;
    line-height: 4.425;
    padding: 0;
    float: right;
    margin:0.5em 0 0 0;
}
#mega-menu-dropdown span {
    float: right;
    color: #fff;
    font-size: 16px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#mega-menu-dropdown i {
    color: #fff;
    font-size: 16px;
    margin: 9px 0 0;
    vertical-align: 5%;
}
#access-mobile > div {
    background: #0c2d38;
    margin: 0;
}
#access-mobile ul {
    margin: 0;
    list-style: none;
    background: #0c2d38;
    margin: 0 auto;
    display: none;
    padding: 0 20px;
    clear: both;
    position: relative;
    z-index: 1000;
}
#access-mobile ul ul {
    display: block;
    margin: 0;
    padding: 0 0 0 14px;
}
#access-mobile li {
    border-top: 1px solid #163a46;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
}
#access-mobile li:first-of-type {
    border: none;
}
#access-mobile li a {
    border: none;
    color: #919191;
    display: block;
    line-height: 3.25em;
    text-decoration: none;
    font-weight: normal;
    padding: 4px 0;
    font-size: 14px;
}
#access-mobile li li {
    border: none;
}
#access-mobile li li a {
    font-size: 12px;
}
#access-mobile .current_page_item a {
    color: #ffffff;
}
#access-mobile li a:active,
#access-mobile li a:hover {
    color: #ffffff;
}

/* Search Form */
#branding #searchform {
    float: right;
    padding: 1.325em 0;
}
#branding #s {
    float: right;
    padding: 4px 0 4px 28px;
    border-radius: 0;
    box-shadow: none;

    -webkit-transition: width .2s linear;
    -moz-transition: width .2s linear;
    -ms-transition: width .2s linear;
    -o-transition: width .2s linear;
}
#branding #s:focus {
    width: 132px;
}
#branding #searchsubmit {
    display: none;
}
Avatar billede olsensweb.dk Ekspert
25. december 2014 - 13:59 #1
kører parallet på http://www.udvikleren.dk/forum/46378/virker-paa-mobil,-men-en-enkelt-fejl-paa-tablet/


hvad er årsagen til du ikke bruger din gamle profil ??
http://www.eksperten.dk/profil/kischi

jf brugerbetingelserne
citat
1 Brugeroprettelse -> 2
Det er kun tilladt at have én brugerprofil på Eksperten.dk, med mindre andet er aftalt med Admin eller CoAdmins.
/citat
har du glemt dit password kan få tilsendt en nyt password ved at trykke på "Glemt adgangskode" i login boxen
har du glemt brugernavn (email) kan "co admin" sikkert hjælpe.
Avatar billede alamakota Nybegynder
25. december 2014 - 21:49 #2
Hej Ronols,

Tak for dit svar.

Det var en af mine ansatte som lagde dette opslag op fra hendes egen profil, da jeg ikke lige havde tid på det tidspunkt.

Så dette er ikke min profil (http://www.eksperten.dk/profil/kischi)

Hun har nu bedt mig svare på dit spørgsmål, så derfor gør jeg det, men ellers er dette hendes profil og den er sat op med hendes mail, så det kun er hende der får notifikationer når der kommer svar i denne tråd.

Det er korrekt at den kører sideløbende på udvikleren, med min profil.
Desværre er der dog ikke kommet nogen svar nogle af stederne.

Men tak for din bekymring, bare rolig dette er ikke en dobbelt profil.

Håber stadig der kommer nogle svar som kan bruges.

Håber du og alle andre har en fantastisk jul.
Og hav et godt nytår
Avatar billede alamakota Nybegynder
05. januar 2015 - 14:24 #3
Hej Alle,

Så virker det.
Jeg poster lige løsningen her hvis andre skulle have gavn af det.

Jeg satte header til position: relative
og satte min max-width til 1200 istedet for 960.

Tak for det.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester