Adjusting Border Lengths with Media Queries

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%;
}
 }

Answer №1

For the media query, make sure to utilize the identical selector as the one used in the preceding code: div.right-border:before (avoid using after)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting data from a textbox in a PHP view and passing it to the controller

Is there a way to retrieve the values entered in a text box on a webpage and pass them to a PHP controller for display? VIEW <input type="text" name="Quantity" id="Quantity" value="" /> CONTROLLER function cartoutput() {//echo "hi"; $category ...

Prevent highlighting of empty spaces in HTML by disabling selection

My goal is to be able to identify the word that is clicked on screen using jQuery without selecting any white space. For example, if I click between the word "together" and the down arrow, it should not select anything in this scenario. To achieve this, I ...

What is the best way to enlarge an image while keeping it contained within a card using Bootstrap?

Is it possible to create a visually appealing card similar to the image provided using Bootstrap 5.3.3 and HTML on a website? https://i.sstatic.net/OH4U0.png ...

Arranging rows and columns in Bootstrap 3 for small screens

My layout is structured as follows: <div class="container"> <div class="row"> <div class="col-md-8> <div class="row"> <div class="col-md-12"> box 1 & ...

Adjustments in margins for printed HTML may vary from page to page in Internet Explorer versions 8 to 11

One challenge I'm facing is with a user-generated report page that is typically printed. There seems to be an unusual bug occurring specifically in Internet Explorer. The layout of the page consists of tables within various divs, all aligned perfectly ...

Looking to troubleshoot a white background issue while attempting to create a transparent navbar

I am trying to create a full-page landing with a transparent navbar using bootstrap4. My goal is to have a sticky navbar that remains at the top as the user scrolls down the page. When I apply the class 'fixed-top', the navbar stays at the top b ...

Present the outcome in the specified location

I need to quickly test my code and display the result in a specific area. There's a button that should trigger something to be displayed when clicked. Right now I'm just using an alert for testing purposes. $(document).ready(function () { ...

AngularJS Treeview with Vertical Line Styling using CSS

Struggling with styling, I am attempting to create a tree view in AngularJS. Currently, I am facing an issue aligning vertical and horizontal lines for the tree items. Check out my Codepen for reference. <html lang="en"> <head> <meta cha ...

How can I add a drop-down list to a cell within a table?

Can a drop-down list be added into a table cell? Thank you! Here is an excerpt of the code: $sql_query="SELECT nameOfwarning FROM warnings"; $sodss=mysqli_query($d,$sql_query); if (mysqli_num_rows($result)<1) ?> <select name = "warnings"> ...

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Having trouble figuring out how to style all the placeholders in my application with CSS. I've attempted a few different methods: .customField input::-webkit-input-placeholder { color: #2e4bc5; } .x-text-field input::webkit-input-placeholder{ c ...

Ways to verify the user's authentication status on the server end

Before displaying an HTML page, I need to verify user authentication. Here is a snippet from my server.js: const express = require('express'); var jquery = require('jquery'); var admin = require("firebase"); const app = expre ...

The script from 'URL' was declined for execution due to its MIME type of 'text/html' which is non-executable, in addition to strict MIME type checking being enabled

I encountered an error stating "Refused to execute script from 'URL' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." The code that triggered this error is shown below. <!DOCTYPE htm ...

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly? <table> <tbody> <tr ...

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

What is the process for embedding images in Angular that are stored in a directory other than assets?

I am working on an Angular Application with a particular structure outlined below: Structure Within the structure, there is a directory labeled backend (highlighted in yellow) containing other directories. An example of a valid path within this structure ...

jquery dialog box displaying a webpage

I am looking to implement a feature where, upon clicking the edit link in the last column of my dataTable, a separate page for editing should open within a jQuery dialog box. The goal is to seamlessly submit data while providing a user-friendly experienc ...

Why is this dropdown list extending beyond the window?

Why is my dropdown list extending beyond the window? Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue! I am unable to figure out why the list is going off the page. Your help in solvin ...

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

Creating an MPG4 Video from a Three.js Scene: What Are the Steps?

I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...