Dotaz: CSS - responzivní design

[hynaiis]

Přílohy:

• IMG_1704.PNG (332042 bytů)
• IMG_1705.PNG (86326 bytů)

Dobrý večer, mám problém s nastavením CSS pro mobilní zařízení. Na PC i na tabletu web běhá v pohodě, ale na telefonu pozadí končí cca v 80% šířky a jsou tam občas velké mezery mezi bloky (viz přiložená fotka). CSS:

#uvod {
    background:url('img/bg-uvod.png') top no-repeat fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    float:left;
  width: 100%;
margin: 0 auto;
z-index: 1;
min-height: 100%;

}

#content {
width: 1200px;
margin: 0 auto;
}

#cont {
margin-top: 110px;
}

HTML:

...text text text...

Další problém je s menu... Vždy když obrazovku zoomuju, tlačítka "vyskočí" o řádek níž, tudíž už nejsou v liště pro menu. Opět viz fotka HTML:

   
O nás
   
Ceník
   
Služby
   
Kontakt

CSS:

#nabidka {

width:550px;
height: 90px;

margin-left: 1.5em;
  padding-top: 5px;
float:left;

}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {

  list-style: none;
  line-height: 80px;
  
  margin: 0 auto;

}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;

  line-height: 80px;
  height:90px;

}
#cssmenu > ul {

}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {

  font-size: 20px;
  text-transform: ;
  text-decoration: none;
  color: white;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #f26c4f;
}
#sipka {
position: absolute;
left: -1000px;
}
#cssmenu #menu-indicator {
  position: absolute;
  bottom: 0;
  display: block;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-color: white;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

Odpovědi

[hynaiis]

Roztažení do stran vyřešeno, stále ale menu při zoomu vyskočí z panelu.. :(