Responsividade Bootstrap

Olá pessoal tudo beleza?

Bom a pouco tempo resolvi me aventurar em HTML/CSS usando o Bootstrap, surgiu uma oportunidade em fazer a WEB de onde trabalho e então decidi abraçar.

Já fiz alguns rabiscos, nada definido e finalizado, mais um esboço, entretanto estou com um problema na hora da renderização em dispositivos móveis, o que ocorre:

1º Quando o site é acessado por dispositivos móveis, o MENU se adapta e sobrepõe o slider "Carousel";
2º O Texto, titulos, e glyphicons se adaptam normalmente, entretanto ele não consegue renderizar o estilo que foi definido no arquivo ".CSS";

Eu ja vi, revi, vi novamente e não consigo encontrar onde esta o "meu" erro. Se alguém puder me dar uma ajudinha ficarei grato.

Para ver o que ocorre acesse aqui:

[Only registered and activated users can see links. Click Here To Register...]

Não sou o melhor dos front, mas manjo alguma coisa kkkk

1º = Você pode usar Media Queries pra determinar o margin nos dispositivos mobiles
Ex:

Código PHP:

---

<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style> 


---

2º = O Seu .css tem que ficar apos o css do bootstrap...
Ex:

Código PHP:

---

<link href="bootstrap">
<link href="SeuCss"> 


---

Você não usou as "rows" do bootstrap.
Faz assim:

<div class="row">
Conteúdo do seu header.
</div>
<div class="row">
Conteúdo do seu carousel.
</div>

Se mesmo assim continuar, coloque a propriedade overflow: hidden; na row.
E retira a chamada do .map do bootstrap que não precisa dele e nem do bootstrap.css, só precisa chamar o bootstrap.min.css na verdade.
E como o Little disse, deixa o seu .css por último.

Citação:

---

Postado originalmente por Sudeikis [Only registered and activated users can see links. Click Here To Register...]

Você não usou as "rows" do bootstrap.
Faz assim:

<div class="row">
Conteúdo do seu header.
</div>
<div class="row">
Conteúdo do seu carousel.
</div>

Se mesmo assim continuar, coloque a propriedade overflow: hidden; na row.
E retira a chamada do .map do bootstrap que não precisa dele e nem do bootstrap.css, só precisa chamar o bootstrap.min.css na verdade.
E como o Little disse, deixa o seu .css por último.

---

Não é ao contrário, precisa do bootstrap.css e não do min.css? Aqui removendo o bootstrap.css descontrola todo o layout, mais removendo o min.css fica normal.

min é só um formato que tira linhas e espaços desnecessários, assim o código fica mais leve para carregamento, ou seja, o código é igual.

Citação:

---

Postado originalmente por Litlle [Only registered and activated users can see links. Click Here To Register...]

min é só um formato que tira linhas e espaços desnecessários, assim o código fica mais leve para carregamento, ou seja, o código é igual.

---

Seria o reset do css no caso?

Se for eu uso o Normalize.css para fazer isso.

css normal:
body {
background:#000;
}

css minify (min):
body{background:#000}


Em produção não importa que o css fique indentado, importa mais que ele fique menor e mais rápido para carregamento...

Ex, no portal que trabalho o css normal fica em 200kb, min fica 54kb... O código é igual...

Eu estou fazendo um site em bootstrap, alias é meio complicado falar assim, por que a base do layout eu peguei pronta, e sai editando os que eu não queria.
e estou construindo a parte do painel e o acesso ao conteúdo que é listado.
E claro tbm estou tentando manter ele totalmente responsivo, porem certas coisas num devido tamanho não fica como eu queria.
ai eu apelo pro jquery
exemplo

Código:

---

    $(window).resize(function () {
        var TamanhoWidth = $(window).width();
        $("#amendoim").setAttribute("width", TamanhoWidth);
    });

---