CODEWITHSUNDEEP
htmlcssbootstrap-4
flamant
flamant

Reputation: 783

bootstrap margin under 576px

I implement a bootstrap site. I have an issue in the case the width of the screen is under 576 px (xs for bootstrap) Don't pay attention to details, I am only interested in the margin of the content in red

<div class="container">
          <div class="col-xs-12"  *ngIf="innersize < 576">
          <div class="row">
              <div style="background-color: red"*ngFor="let pr of annonces; let index = index;" class="col-xs-12">   
                <div  id="prePreviousMapIdXS" [style.height.px]="0" *ngIf="index === (insertIndex-1)"></div>
                <div  id="previousMapIdXS" [style.height.px]="0" *ngIf="index === insertIndex"></div>
                <div  id="card{{index}}IdXS">
                  <app-product-light (mouseenter) ="mouseEnterProduitImmobilier(index)"  (mouseleave) ="mouseLeaveProduitImmobilier(index)"  [produit]="pr"></app-product-light>
                </div>
                <div  id="listXSMap" [style.margin-bottom.px]="25"  [style.width.px]="cardWidth" [style.height.px]="cardHeight" *ngIf="index === insertIndex" >
                  <agm-map #gm [latitude]="mainLatitude" [longitude]="mainLongitude" [style.height.px]="computeMapXSHeight()" [fitBounds]="true">
                    <agm-marker *ngFor="let marker of markers; let index = index"  [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="markers[index].markerIcon" [animation]="markers[index].markerAnimation" (markerClick)="clickedMarker(infoWindow, gm)" [agmFitBounds]="true">
                        <agm-info-window [disableAutoPan]="false" #infoWindow [maxWidth]="350">
                            <span class="">
                              <div style="float: left;">
                              <img width="70" height="40"   src="../../assets/images/maison1.png" alt="Card image cap">
                              </div>
                              <div style="float: right; padding-left: 10px">
                              <div class="poppinsbold10diese372300 whitespacenowrap">{{annonces[index].nbrPiece}}
                                Pièces / {{annonces[index].nbrChambre}} Chambres / {{annonces[index].surfaceHabitable}}m<sup>2</sup>
                              </div>              
                              <div class="poppinsregular8diese171717DE whitespacenowrap opacity05 ">
                                {{annonces[index].adresse}}  / {{annonces[index].ville}}  / {{annonces[index].codePostal}}
                              </div>
                              <div class="poppinsextrabold10diese372300 whitespacenowrap" style=" margin-top: 5px">
                                {{annonces[index].prix | currency:'EUR':'symbol':'1.0-0':'fr'}}
                              </div>  
                              </div>                  
                            </span>
                        </agm-info-window>
                    </agm-marker>
                  </agm-map>    
                </div>
              </div>
          </div>
        </div>
</div>

Here is the fiddle : https://jsfiddle.net/boilerplate/bootstrap

The issue is that when I resize the width under 576px, there is no more margin. Above that size there is a margin

Upvotes: 0

Views: 683

Answers (3)

flamant
flamant

Reputation: 783

I finally found a solution without understandind it

In place of

col-xs-12

I put everywhere

col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12

and it works

Upvotes: 0

tao
tao

Reputation: 90068

That's the default behavior of .container on mobile devices: width: 100%. If you want to limit it to say 94% of the available device width below 576px, use this CSS:

@media (max-width: 575px) {
  .container {
    width: 94%;
  }
}

See it here: https://jsfiddle.net/websiter/p1n0j4vu/

Change 94% to whatever makes sense for your project.
For example, if you want to maintain fixed margins of 30px below that responsiveness breakpoint, you could use calc(100% - 60px).

Upvotes: 1

Avyn E.
Avyn E.

Reputation: 46

The issue is that you're using the container class for your container. You can instead use the container-fluid class and style it to have padding. Here's a JSFiddle. The difference between the container class and container-fluid class is that the container class will resize and adjust its margin depending on the size of the viewport. Here is the adjusted code:

HTML:

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container-fluid">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

CSS:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.container-fluid {
  padding: 0 30px;
}

Upvotes: 1

Related Questions