Problem with bootstrap

Asked

Viewed 260 times

0

I recently made a page using Bootstrap, and hosted it at Hostgator. When I see the live preview in Brackets or enter the hosted page, they are equal and no problem, this on my pc. However, when someone accesses the site, css doesn’t work the way it was supposed to, and it looks different to other people.

How it was meant to be: Oque era pra ser

How it is appearing on other computers (excluding mine, where everything looks right):

Como aparece

The HTML code for this snippet:

<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>

and finally the CSS code:

.box box {

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

}

html css twitter-bootstrap bootstrap-4

  • There is a difference between browsers and devices may be occurring something similar, but anyway, you could share the site url for us to test?

  • So, but what I find strange is that in all the browsers I tested on my pc worked smoothly, up to Edge.. However on the computer of friends he gives this error.. The site is www.descubraalemanha.com.br, on the page of the tours.

  • Most likely when you were developing, you were not cleaning the caches, so you may have defaced the site yourself, but with the caches saved, it seems that the site is right. Test and clear your browser caches.

1 answer

2

Guy your Bootstrap grid is having various organization problems regarding row/col/offset so I reworked html. In addition you put a fixed value in PX for an element that should have the variable width in % as Grid suggests

Another thing, I left as you did in CSS, but Bootstrap 4 itself already has helpers for shadow, border-radius, and img-thumbnail. So on your tag img you could use 

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

Take a look at this link: https://getbootstrap.com/docs/4.1/content/images/

See how the result turned out. Displays in full page to see how it looks, because you used the col-md on the grid and snippet here the grid is responsive

.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>

  • What are the organization problems? The helpers for box shadow and etc I didn’t know, thank you very much! And I tried to adapt the code, and the error persists, only now it appears below where it should..

  • @Cayoeduardosilveira must be appearing lower because of this style on the second Row <div class="row" style="margin-top: 85px;"> vc can take this style with 85px and put mt-4. The problem is that the Row follows the grid of 12 columns, and this col-md-5 + col-md-5 offset-1 doesn’t make sense since it would have 11 columns... I don’t know if I understood the kind of division you intended with this grid...

Browser other questions tagged html css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.