MyCity » Web dizajn / HTML » background se ne fituje skroz i problem dugmad responsive bootstrap

background se ne fituje skroz i problem dugmad responsive bootstrap

Napisano na dan: 11.2.2015
2

background se ne fituje skroz i problem dugmad responsive bootstrap
Pagination Prethodna strana

Idi na vrh

Poslao: 14 Feb 2015 22:08
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

Pa da, ali sta da overridujem, de sad da trazim media fajlove sa tim rezolucijama, ili sta vec...Ili si mislio da overridujem samo dugme i formu... za media screenove?



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 15 Feb 2015 02:36
Idi na vrh
offline
  • C# and PHP Developer
  • Pridružio: 16 Feb 2011
  • Poruke: 1630
  • Gde živiš: Pancevo

pa u svom fajlu gde si override. Ne da menjas postojeci bootstrap nego npravis svoj i override taj njegov sa svojim druze



Poslao: 15 Feb 2015 11:09
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Bootstrapovi default breakpointi:
xs <768px (mobilni)
sm 768px - 991px (tableti)
md 992px-1199px (laptopovi/desktop racunari manjih rezolucija)
lg≥1200px (desktop sa velikim rezolucijama)

Dosta stvari zavrsavaju ali cesto je potrebno u css dodatno stilizovati stvari na tim a i custom breakpointima.

Ako je na pr zadato samo md on ce vaziti i za md i za lg itd.

Poslao: 15 Feb 2015 18:57
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

pa evo stavio sam na net ja sajt, [Link mogu videti samo ulogovani korisnici] ali ne znam na kojim bih menjao...

Poslao: 15 Feb 2015 19:52
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Napisano: 15 Feb 2015 19:45

Napravio si typo pri kucanju bootstrap klase napisao si "col-sm6-6" a treba col-sm-6

Takodje sam prosirio broj kolona koje onaj imput i dugme zahvataju na medium rezolucijama, jer si u col-md-4 sabio obe te stvari pa je dugme izletalo. Takodje svakom divu obavezno zadaj id/klasu - prvo sto ces raspored u kodu vizuelno lakse raspoznavati ali pre svega (i najbiitnije) gotovo da neces moci nista da stilizujes ako nemas klase/id.

Zameni ovaj deo, kodom ispod:

  1. <div class="row" id="notify-me">
  2.                     <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
  3.                         <form class="form-inline" role="form">
  4.                           <div class="form-group">
  5.                          <input class="form-control" placeholder="Your email here..." type="email">
  6.                           </div>
  7.                           <button type="submit" class="btn btn-theme  btn-fill">Notify Me</button>
  8.                         </form>
  9.  
  10.                     </div>
  11.                 </div>


Takodje na rezolucijama za telefone (tamo negde ispod 400px) pojavljuje se horizontalni slider jer je font prevelik, tako da bi trebao smanjiti font ali samo za taj breakpoint. Ostalo izgleda ok.

Dopuna: 15 Feb 2015 19:47

Idi na inspect element na google chrome i polako suzavaj sliku i tacno ces videti kako se i na kojim rezolucijama sajt ponasa i na kojim breakpointima treba da vrsis popravku.

Dopuna: 15 Feb 2015 19:52

Vidim u sorceu da se nudi i mogucnost uncomment-a reset.css
Moja topla preporuka je da to uradis. Taj fajl resetuje sve elemente na nulu, tj sve one elemente za koje svaki browser ima sopstvene vrednosti sto za posledicu ima nejednaki izgled sajta u razlicitim browserima.

Poslao: 16 Feb 2015 11:40
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

Napisano: 15 Feb 2015 20:41

Hvala,
evo sada sam malo to modifikovao, i problem je sto mi nije na sredini, a ne vidim nigde gde sam ga mozda overridovao sa nekom od drugih media ..
evo tog dela gde sam media radio

  2. @media (max-width: 768px){
  3.   .navbar-transparent{
  4.       padding-top: 0px;
  5.       background-color: rgba(0, 0, 0, 0.75);
  6.   }
  7.   .navbar-transparent .navbar-collapse.in .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-transparent .navbar-collapse.in .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-transparent .dropdown-menu > li > a:hover, .navbar-transparent .dropdown-menu > li > a:focus, [class*="navbar-ct"] .dropdown-menu > li > a:hover, [class*="navbar-ct"] .dropdown-menu > li > a:focus{
  8.       color: #FFFFFF;
  9.       background-color: rgba(0,0,0,0);
  10.       opacity: 1;
  11.   }
  12.   .navbar-transparent .navbar-collapse.in .navbar-nav .open .dropdown-menu > li > a, [class*="navbar-ct"] .dropdown-menu > li > a {
  13.       color: #FFFFFF;
  14.       opacity: 0.8;
  15.   }
  16.   .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  17.       background-color: rgba(0,0,0,0);
  18.       border-color: #428BCA;
  19.   }
  20.   .navbar-collapse{
  21.       text-align: center;
  22.   }
  23.   .navbar-collapse .navbar-form {
  24.       width: 170px;
  25.       margin: 0 auto;
  26.   }
  27.   .navbar-transparent .dropdown-menu .divider{
  28.       background-color: #434343;
  29.   }
  30.  
  31. }
  32. .modal-backdrop.in {
  33.   opacity: 0.25;
  34. }
  37. .main{
  38.   background-position: center center;
  39.   background-size: cover;
  40.   height: auto;
  41.   left: 0;
  42.   min-height: 100%;
  43.   min-width: 100%;
  44.   position: absolute;
  45.   top: 0;
  46.   width: auto;
  47. }
  48. .cover{
  49.   position: fixed;
  50.   opacity: 1;
  51.   background-color: rgba(0,0,0,.6);
  52.   left: 0px;
  53.   top: 0px;
  54.   width: 100%;
  55.   height: 100%;
  56.   z-index: 1;
  57. }
  58. .cover.black{
  59.   background-color: rgba(0,0,0,.6);
  60. }
  61. .cover.blue{
  62.   background-color: rgba(5, 31, 60, 0.6);
  63. }
  64. .cover.green{
  65.   background-color: rgba(3, 28, 7, 0.6);
  66. }
  67. .cover.orange{
  68.   background-color: rgba(37, 28, 5, 0.6);
  69. }
  70. .cover.red{
  71.   background-color: rgba(35, 3, 2, 0.66);
  72. }
  74. .blur{
  75. opacity:0;
  76. }
  77. h1.logo{
  78.  font-family:MyFirstFont;
  79.  
  80. }
  83. .main .logo{
  84.   color: #FFFFFF;
  85.   font-size: 56px;
  86.   font-weight: 300;
  87.   position: relative;
  88.   text-align: center;
  89.  
  90.   margin-top: 100px;
  91.   z-index: 3;
  92. }
  93. .main .logo.cursive{
  94.   font-family: 'Grand Hotel',cursive;
  95.   font-size: 82px;
  96.  
  97. }
  98. .main .content{
  99.   position: relative;
  100.   z-index: 4;
  101. }
  103. .main .motto{
  105.  font-family:Amatic-Bold;
  107. }
  109. .main .motto, .main .subscribe {
  111.   font-size: 88px;
  112.   color: #FFFFFF;
  113.   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.33);
  114.   text-align: center;
  116.  
  117. }
  118. .main .subscribe {
  119.   font-size: 18px;
  121. }
  123. .footer{
  125.   width: 100%;
  126.  
  127.   z-index: 4;
  128.   text-align: center;
  130. }
  132. /*animation social icons hower*/
  133. .grow {
  134.  -webkit-transition: all 0.5s ease;
  135.  -moz-transition: all 0.5s ease;
  136.  -o-transition: all 0.5s ease;
  137.  -ms-transition: all 0.5s ease;
  138.  transition: all 0.5s ease;
  139. }
  141. .grow:hover {
  142.  border-radius: 50%;
  143.  -webkit-transform: rotate(360deg);
  144.  -moz-transform: rotate(360deg);
  145.  -o-transform: rotate(360deg);
  146.  -ms-transform: rotate(360deg);
  147.  transform: rotate(360deg);
  148. }
  149. /*end of animation social icons hower*/
  150. .footer a{
  151.   color: #FFFFFF;
  152. }
  153. .footer .heart{
  154.   color: #FF3B30;
  155. }
  157. @media (min-width:219px) and (max-width: 301px) {       
  158.   .main .subscribe .form-group{
  159.       width: auto;
  160.   }   
  161.   .main .subscribe .form-inline .btn{
  162.       width: 100%;
  163.   } 
  164. h2.subtitle {
  165.  color: #fff;
  166.  font-size: 10px;
  167.  font-family: mySecondFont;
  168.  text-align:center;
  169. }
  170. .main .motto{
  172.  font-family:myFirstFont;
  173.   font-size:18px;
  175. }
  176. .main .logo{
  177.   color: #FFFFFF;
  178.   font-size: 18px;
  179.   font-weight: 0;
  180.   position: relative;
  181.   text-align: center;
  182.  
  183. }
  185.    
  186. }
  187. @media (max-width:219px){       
  188. .main .motto{
  190.  font-family:arial;
  191.   font-size:18px;
  193. }
  194. .main .logo{
  195.   color: #FFFFFF;
  196.   font-size: 18px;
  197.   font-weight: 0;
  198.   position: relative;
  199.   text-align: center;
  200.  
  201. }
  202. h2.subtitle {
  203.  color: #fff;
  204.  font-size: 15px;
  205.  font-family: mySecondFont;
  206.  text-align:center;
  207. }
  210. .grow{
  211.     display:none;
  212.  
  213.  }
  214.  .form-control{
  215.  width:auto;
  216.  }
  217.  .btn{
  218.  width:auto;
  219.  }
  220.  h1.logo
  221. {
  222.  
  223. }
  224. }
  226. @media (min-width:768px){       
  227.   .main .subscribe .form-inline .btn{
  228.       width: auto;
  229.   }   
  230. .main .motto{
  232.  font-family:arial;
  233.   font-size:50px;
  235. }
  236. .form-control {
  237.  
  238. }
  239. }
  240. @media (min-width:991px){       
  241.   .main .subscribe .form-group{
  242.       width: 190px;
  243.   }   
  244. .footer{
  245.  
  246.   padding:20px;
  248. }
  249.  
  250. }
  251. @media (min-width:1200px){       
  252.   .main .subscribe .form-group{
  253.       width: 250px;
  254.   }   
  255.   .footer{
  256.  margin-top:100px;
  257.   }
  258. }
  264. @media (max-width:768px){
  265.   .fixed-plugin{
  266.       top: 80px;
  267.       right: 0px;
  268.   }
  269.   .main .container{
  270.       margin-bottom: 50px;
  271.   }
  272.  
  274. }
  276. @media (min-width: 768px) and (max-width: 991px) {
  277. .footer{
  278.  padding:50px;
  279. }
  281. }
  282.  @media (min-width: 992px) and (max-width: 1300px) {
  283.     .footer{
  284.   margin-top: 80px;
  285.     }
  286.     .btn{
  287.  margin:5px;
  288.     }
  289. }
  290.  



Dopuna: 15 Feb 2015 21:33

I stavio sam pre zatvaranja body taga jedan brojac, ali ne ocitava ga, u cemu je prolbem tu? Uopste ga ne stavlja..

  1. <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  2.  
  3.    <script src="cs/js/jquery.countdown.min.js"></script>
  4.    <script type="text/javascript">
  5.   $('#countdown').countdown('2016/01/01', function(event) {
  6.     $(this).html(event.strftime('%w:%d:%H:%M:%S'));
  7.   });
  8. </script>

Dopuna: 15 Feb 2015 23:51



Dopuna: 16 Feb 2015 1:16

u inspect ellement sam nasao bas cudne vrednost, mada su iz bootstrapa..
Da ovo onda u media podesim? Ali kako da stavim bas da bude sredina?


Dopuna: 16 Feb 2015 1:17

jer i kada je okej, na sredini, na drugoj rezoluciji, isto stoji -15px...

Dopuna: 16 Feb 2015 11:40

Evo, kao sam uspeo malo da to sredim...
[Link mogu videti samo ulogovani korisnici]

Ako mzoete proverite jos d ali je sve to ok sa rezolucijama...

Poslao: 17 Feb 2015 15:38
Idi na vrh
offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Malo je cudan raspored koda zato i spada submit dugme na nekim delovima. Ako zelis da ti submit dugme konstantno bude u rowu sa imput poljem, zameni ovaj deo kodom ispod:

  1. <div class="col-md-6 col-md-offset-3 col-sm-12">
  2.                         <form action="sendToFile.php" method="POST" class="form-inline" role="form">
  3.                           <div class="form-group">
  4.                            
  5.                            <input name="field1" type="email" class="form-control" placeholder="Your email here...">
  6.                           </div>
  7.                           <button type="submit" class="btn btn-theme btn-fill">Notify Me</button>
  8.                         </form>
  9.  
  10.                     </div>


Ostalo je manje vise ok po izgledu, al u kod me iskreno mrzi da gledam posto ga ima previse. Inace te bocne margine od -15px sto vidis to je defaultna vrednost za bootstrapovu klasu .row, zato uvek treba da se isprati redosled container>row>col kako bi jedna klasa drugoj potirala margine. Container zadaje 15px margine, row im zadaje negativnu vrednost i tako ih potire itd.

Poslao: 17 Feb 2015 18:50
Idi na vrh
offline
  • Huskar
  • Pridružio: 31 Maj 2008
  • Poruke: 885

Pa ne mora uvek biit u redu sa input poljem, to sam hteo kod nekih samo, ali sad se cini okej, sta znam...pa da, to -15px sam i skontao posle da je za sve isto, problem je bio u mom css, sad sam to nekkao ispraviooo...Smile

MyCity » Web dizajn / HTML » background se ne fituje skroz i problem dugmad responsive bootstrap

Ko je trenutno na forumu
 

Ukupno su 743 korisnika na forumu :: 18 registrovanih, 0 sakrivenih i 725 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Black Luster Soldier, Boris1705, BZ, comi, Czrweni, FileFinder, Inner-Cell, kaskadija, Koridor, mige84, MilosKop, Mrav Obrad, PrincipL, Sami_1ali, Soncogor, Tas011, TheDictator, Zukov