Hello everyone, I have a question regarding CSS styling in Bootstrap framework. I am currently using Bootstrap to create a simple webpage with gray borders on certain div elements. However, when viewing the page on mobile, some of these divs are hidden and the border color looks out of place. Is there a way to target CSS elements with Bootstrap so that when the page is resized for mobile, the border color changes to black or does not show at all?
Below is a snippet of my code:
<div class="container">
<!--Start of row-->
<div class="row">
<!--leftdiv1-->
<div class="col-sm-6" id="left1">
<h3 class="text-center" id="main">XXXXXXX</h3>
<p class="text-center">XXXX & XXXXX</p>
</div>
<!--rightdiv1-->
<div class="col-sm-6 hidden-xs contacts" id="right1">
<ul>
<li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
<li><a href="https://drive.google.com/file/d/0B1NTGaJa5XdtVlpvQUttVWhmMXM/view" target ="_blank"><span class="glyphicon glyphicon-save-file"></span> Download</a></li>
<li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
</ul>
</div>
</div>
CSS Code Snippet:
#left1 {
border-right: dashed grey 3px;
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
#right1 {
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}