Search code examples
cssbootstrap-4angular-ui-bootstrap

Adding margin on only large screen

I'm developing an app with angular 9. In my view I added magin in order to reduce the size of the form

<div class="row">
  <div class="col-12 mb-4" *ngIf="!displayListCompanies; else companiesList">
    <div class="card" style="min-height: 579px; margin-right: 200px; margin-left: 200px">
      <div class="card-body justify-content-between align-items-center">
        <div class=" company-welcome-logo">

        </div>
        <p class=" text-justify text-center font-weight-bold font-size-xlarge"><b>{{'company.welcome-abord' | translate}} {{ displayName }} !</b></p>
        <p class=" text-justify text-center">{{'company.welcome-text1' | translate}} <br/> {{'company.welcome-text2' | translate}} </p>

        <button class="btn btn-primary btn-lg btn-shadow align-items-center align-content" (click)="createCompany()">
          {{ "company.create" | translate }}
        </button>

      </div>
    </div>

  </div>

  <ng-template #companiesList>
    Another magic element!
  </ng-template>
</div>
<simple-notifications></simple-notifications>

enter image description here

On medium screen I want to keep the margin, but remove it on small device. enter image description here

I tried to use bootstrap to achieve this without success How could I do this ? Thanks in advance.

Solution

  • Use CSS media queries. Put the extra margins only in the min-width: XXXX section.

    Like so...

    <style>

@media only screen and (min-width: 1000px) {
  /* For large screens: */
  .card {margin-right: 200px; margin-left: 200px}
}

</style>

    Though you may want to give the card an ID so that if you have multiple divs of class card, it will only apply to the one you need. Then in the media query, instead of .card, you'd have #formcard or whatever.