0

Recentemente fiz uma pagina usando Bootstrap, e hospedei ela no Hostgator. Quando eu vejo o live preview no Brackets ou entro na pagina hospedada, elas estão iguais e sem problema, isso no meu pc. Entretanto, quando alguem acessa o site, o css não funciona do jeito que era pra funcionar, e ele aparece diferente para as outras pessoas.

Como era pra ser: Oque era pra ser

Como está aparecendo em outros computadores (excluindo o meu, em que tudo aparece certo):

Como aparece

O codigo Html para esse trecho:

<div class="col-md-4" style="margin-top: 85px;">
            <div class="row">
                <div class="col-md-5">
                    <div class="box">
                        <div class="container p-2">
                        <img class="img-fluid" alt="O YAAM é uma comunidade africana localizada às margens do rio Spree, bem próximo a East Side Galery" src="../../fotos/Frankfurt/Q1.jpg">
                        </div>
                    </div>
                </div>

                <div class="col-md-5 offset-1">
                    <div class="box">
                        <div class="container p-2">
                        <img class="img-fluid" alt="Graffiti na east side galery" src="../../fotos/Frankfurt/Q2.jpg">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-5">
                    <div class="box">
                        <div class="container p-2">
                            <img class="img-fluid" alt="" src="../../fotos/Frankfurt/Q3.jpg">
                        </div>
                    </div>
                </div>

                <div class="col-md-5 offset-1">
                    <div class="box">
                        <div class="container p-2">
                        <img class="img-fluid" alt="" src="../../fotos/Frankfurt/Q4.jpg">
                        </div>
                    </div>
                </div>
            </div>

        </div>

e por fim o código CSS:

.box {

width: 230px;
height: 230px;
border-radius: 0;
box-shadow: 5px 5px 15px;

}

3
  • Existe uma diferença entre navegadores e dispositivos pode estar ocorrendo algo parecido, porém de qualquer forma, teria como você compartilhar a url do site para nós testarmos? Commented 26/02/2019 às 18:49
  • Então, mas oque eu acho estranho é que em todos os navegadores que eu testei no meu pc funcionaram sem problema, até o Edge.. Entretanto no pc de amigos ele da esse erro.. O site é www.descubraalemanha.com.br, na pagina dos passeios. Commented 26/02/2019 às 18:51
  • Muito Provavelmente quando você estava desenvolvendo, não estava limpando os caches, então você mesmo pode ter desconfigurado o site, mas com os caches salvos, parece que o site tá certo. Faça um teste e limpe os caches do seu navegador. Commented 26/02/2019 às 18:53

1 Resposta 1

2

Cara seu grid do Bootstrap está com vários problemas de organização referentes row/col/offset por isso refiz o html. Além do mais vc colocou um valor fixo em PX para um elemento que deveria ter a largura variável em % como o Grid sugere

Outra coisa, eu deixei como vc fez no CSS, mas o próprio Bootstrap 4 já tem os helpers para shadow, border-radius, e img-thumbnail. Então na sua tag img vc poderia usar

<img class="img-fluid img-thumbnail shadow-sm"  src="...">

Da uma olhada nesse link: https://getbootstrap.com/docs/4.1/content/images/

Veja como ficou o resultado. Exibe em Pagina toda para ver como fica, pois vc usou as col-md no grid e no snippet aqui o grid fica responsivo

.box {
    border-radius: 0;
    box-shadow: 5px 5px 15px;
}
.box img {
    width: 100%;
    height: auto;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row" style="margin-top: 85px;">
                <div class="col-md-6">
                    <div class="box">
                        <div class=" p-2">
                            <img class="img-fluid"  src="https://placecage.com/100/100">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box">
                        <div class=" p-2">
                            <img class="img-fluid"  src="https://placecage.com/100/100">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 85px;">
                <div class="col-md-6">
                    <div class="box">
                        <div class=" p-2">
                            <img class="img-fluid"  src="https://placecage.com/100/100">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box">
                        <div class=" p-2">
                            <img class="img-fluid"  src="https://placecage.com/100/100">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2
  • Quais são os problemas de organização? Os helpers para box shadow e etc eu não sabia, muito obrigado! E eu tentei adaptar o código, e o erro persiste, só que agora ele aparece mais abaixo de onde deveria.. Commented 26/02/2019 às 19:07
  • @CayoEduardoSilveira deve estar aparecendo mais abaixo por causa desse style na segunda Row <div class="row" style="margin-top: 85px;"> vc pode tirar esse style com 85px e colocar mt-4. O problema é que a row segue o grid de 12 colunas, e isso col-md-5 + col-md-5 offset-1 não faz sentido já que ficaria com 11 colunas... não sei se entendi direito o tipo de divisão que vc pretendia com esse grid...
    – hugocsl
    Commented 26/02/2019 às 19:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .