remove bottom border for specific screen size

Question

As you can see outer border are lighter than inner border in this form i tried to remove the bottom border for specific screen size but its not working I want when screen size matches then bottom border will remove

var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);

function myFunction(x) {
  if (x.matches) {
    document.getElementById("b-brdr").style.borderBottom = "none";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-lg py-3" id="ofc_use">
  <div class="row mx-auto">
    <div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr">
      <h5>FOR OFFICE USE ONLY</h5>
      <p>(to be filled by financial institution)</p>
    </div>
    <div class="col-lg-9">
      <div class="row">
        <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
          <h4>Application Type*</h4>
        </div>
        <div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div>
        <div class="border border-dark col-lg-4" id="b-brdr">
          <h5 class="d-inline">KYC Number</h5>
          <p class="d-inline"> (Mandotary for KYC Update Request)</p>
        </div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div>
      </div>
      <div class="row">
        <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
          <h4>Account Type*</h4>
        </div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div>
        <div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
      </div>
    </div>
  </div>
</div>

You can use css media queries. It is much simpler and doesnt require any js. — Abdullah Qasemi, Jun 28 '22 at 07:16

score 1 · Answer 1 · answered Jun 28 '22 at 07:13

1

@Md Mohtesham Azam add this to your css below:

@media only screen and (max-width: 992px){
    #b-brdr { border-bottom:0 !important;}
}

answered Jun 28 '22 at 07:13

Devbuddy

231
4
15

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 28 '22 at 11:14

novice in DotNet · Accepted Answer · 2022-06-28T08:26:45.217

Does this work?

var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);

function myFunction(x) {
  if (x.matches) {
    var div_list = document.querySelectorAll('#b-brdr');
    var div_array = [...div_list]
    div_array.forEach(div => {
      div.style.cssText  = "border-bottom:none !important;";
    });
  }
  else{
    var div_list = document.querySelectorAll('#b-brdr');
    var div_array = [...div_list]
    div_array.forEach(div => {
      div.style.cssText  = "";
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-lg py-3" id="ofc_use">
  <div class="row mx-auto">
    <div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr">
      <h5>FOR OFFICE USE ONLY</h5>
      <p>(to be filled by financial institution)</p>
    </div>
    <div class="col-lg-9">
      <div class="row">
        <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
          <h4>Application Type*</h4>
        </div>
        <div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div>
        <div class="border border-dark col-lg-4" id="b-brdr">
          <h5 class="d-inline">KYC Number</h5>
          <p class="d-inline"> (Mandotary for KYC Update Request)</p>
        </div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div>
      </div>
      <div class="row">
        <div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
          <h4>Account Type*</h4>
        </div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div>
        <div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div>
        <div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
      </div>
    </div>
  </div>
</div>

Changes made:myFunction changed to document.getElementById("b-brdr").style.cssText = "border-bottom:none !important;";

Demo

Reference

it remove only 1st border but not all inner border – Md Mohtesham Azam Jun 28 '22 at 08:08 — Md Mohtesham Azam, Jun 28 '22 at 08:08
updated fiddle and snippet. does it help? – novice in DotNet Jun 28 '22 at 08:11 — novice in DotNet, Jun 28 '22 at 08:11
I've doubt, do you mean all four borders of b-brdr? – novice in DotNet Jun 28 '22 at 08:12 — novice in DotNet, Jun 28 '22 at 08:12
not all four but all bottom border who have id b-brdr – Md Mohtesham Azam Jun 28 '22 at 08:17 — Md Mohtesham Azam, Jun 28 '22 at 08:17
updated snippet and fiddle. please check. Thanks – novice in DotNet Jun 28 '22 at 08:27 — novice in DotNet, Jun 28 '22 at 08:27

remove bottom border for specific screen size

2 Answers2