I'm currently using the following code, but I'm facing an issue with media queries on iPAD where the right border is too close to the second Div. I'd like the border to align properly for all devices and browsers when using media queries. Any suggestions?
HTML:
<div class="row">
<div class="medium-6 large-6 columns right-border">
<h4>ABC TEST</h4>
<p>I love coding</p>
<p><strong>Code</strong></p>
</div>
<div class="medium-6 large-6 columns">
<h4>ABC TEST</h4>
<p>Love coding</p>
<p>live life</p>
</div>
</div>
CSS :
div.right-border:before {
content: "";
border-right:1px solid #bcb4b4;
width:60%;
position:absolute;
top: 7%;
left: 90px;
height: 80%;
}
@media only screen and (min-width: 320px) and (max-width: 760px) {
div.right-border:before {
border-right:none;
border-bottom:1px solid #ca6e6e;
left:1%;
width:260px;
bottom:90%;
height:90%;
}
}