Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

HDD Extern Seagate

Range extender

Problema automatizare
 Business Developer Manager

Sistem fotovoltaic 5kw off grid

Repunere minge in teren

Telefon de pe Amazon sau site rom...
 Digitalizare in domeniul Horeca

Asigurare la B7 cat mai ajunge?

cumparare masina inmatriculata in...

Certificat fiscal auto
 [CUM] Cum ati fi reactionat in ac...

Credex și altex fara dobanda

schimbare nume familie copil

Problema mașina de spalat ve...
 

Redimensionare versiune mobila

- - - - -
  • Please log in to reply
8 replies to this topic

#1
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Salut, detion o tema responsive, nu prea cunosc css, asa ca am venit aici sa va cer ajutor. Despre ce e vorba? Cand redimensionezi fereastra browserului la o dimensiune de mobil, aceasta isi preia versiunea de mobil, dar exista un mic bug. Atunci cand deschizi meniul, il lasi deschis si faci fereastra mare (maximize), meniul de mobil ramane pe pagina, odata cu cel de dekstop.

Acelasi topic il gasiti si la sectiune javascript dar cineva m-a informat ca nu are treaba cu js-ul ci cu css-ul.

Puteti vedea un demo aici(faceti pasii de mai sus): http://evobikes.ro/ya/

Codul din css:

@media screen and (max-width: 640px){
div#topBar{
  height: 50px;
}

div#topBar nav{
  display: none;
}
 
div#topBar #mobileNav{
  display: block;
  color: #FFF;
  line-height: 50px;
  cursor: pointer;
  float: right;
}

div#topBar .mobileHome{
  line-height: 50px;
  color: #FFF;
  display: block;
  float: left;
}

nav#mobileNavigation{
  position: absolute;
  width: 100%;
  z-index: 100;
}

nav#mobileNavigation ul{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav#mobileNavigation ul li{
  height: 50px !important;
  width: 100%;
}

nav#mobileNavigation ul li a{
  height: 50px !important;
  width: 100%;
  font-size: 12px;
  color: #FFF;
  box-shadow: inset 0px 1px 0px #2a3a45;
  background: rgb(31,44,54); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(31,44,54) 0%, rgb(19,27,33) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(31,44,54)), color-stop(100%,rgb(19,27,33))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2c36', endColorstr='#131b21',GradientType=0 ); /* IE6-9 */
  float: left;
  line-height: 50px;
  text-align: center;
}

nav#mobileNavigation ul li a.login{
  color: #FFF;
  background: rgb(136,183,62); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(136,183,62) 0%, rgb(105,158,22) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136,183,62)), color-stop(100%,rgb(105,158,22))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88b73e', endColorstr='#699e16',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0px 1px 0px #AAEF40;
}
}



#2
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
probabil are lagatura cu

nav#mobileNavigation { display: none; }

care ar trebui sa se regaseasca in celalalt css pentru versiunea > 640px , ca sa fie ascunse cand ai mai mult de 640 pixeli ?

Edited by onlyone, 24 December 2013 - 12:52.


#3
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Urmatorul cod referitor cu 640px:

@media screen and (max-width: 640px){
div.slider h1{
  margin-top: 50px;
}
div.sliderWrapper #slideControls{
  position: absolute;
  z-index: 100;
  bottom: 20px;
  width: 100%;
}
div.mainSlider{
  display: none;
}
div.mobileSlider{
  display: block;
}
}



#4
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
cred ca tu trebuie sa adaugi linia asta

nav#mobileNavigation { display: none; }

in

@media screen and (max-width: 1000px){

#5
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Am pus, degeaba.

Se poate verifica la acelasi link

#6
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
cred ca trebuie sa pui si in bootstrap.css ....

#7
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
incearca sa modifici una din proprietatile @media (min-width: 768px) cum ar fi cea de mai jos

@media (min-width: 768px) {
  .lead {
        font-size: 21px;
  }
  nav#mobileNavigation { display: none; }
}

#8
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Am incercat, inzadar.

#9
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
mda pentru ca nu e acolo
m-am uitat cu firebug si proprietatea display:block nu vine din css ci din java script, si nu este setata inapoi pe display:none cand creste rezolutia
js/build.js

acum cineva care stie jquery poate iti da o mana de ajutor...

adica

//Mobile Navigation
$('#mobileNav').click(function(){
  $('#mobileNavigation').slideToggle(1000);
});

cand dai click pe buton se expandeaza navigatia, mai dai odata click se strange navigatia
insa ramane setata proprietatea display:block cand se redimenzioneaza fereastra...

Edited by onlyone, 24 December 2013 - 19:55.


Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate