Creating a separate CSS file for a CSS class that sets the width of a <div

I am looking to enhance a div element by incorporating a specific class from a separate CSS file. For example, my HTML file contains the following snippet:

/* width 90% */

@media (min-width: 960px) {
  div.width90 {
    max-width: 90%;
  }
}
<div class="width90">
  text in div with a 90% width
</div>

However, I am experiencing difficulties as the styling does not seem to take effect even after removing the media query. Despite conducting research online for solutions, I am still struggling due to insufficient familiarity with this technique.

My intention behind utilizing this class is to display text within a div block at a width of 90%, specifically on screens wider than 960px.

If I directly apply the style within the HTML, it functions across all screen sizes, leading to my desire to encapsulate it within a class:

<div style="width: 90%">
  text in div with a 90% width
</div>

Could you please provide guidance on the correct code to achieve this desired outcome? I trust that I have articulated the issue clearly enough! ;)

Thank you, Ellen

Answer №1

It's important not to overlook this snippet within your head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer №2

In the example provided below, I have clearly outlined the steps you need to take to address this issue. The standard CSS will apply to all devices, while the media query CSS will be specifically for devices with a width below 960px.

/* Normal css for devices greater than 960px*/

.width90 {
  width: 90%;
  background: red;
}


/* Custom Responsive CSS for devices less than 960px*/

@media (max-width:960px) {
  .width90 {
    width: 80%; /* Specify the desired width for devices under 960px */
    background: blue;
  }
  
}
<div class="width90">
  Dummy Text
</div>

Upon reviewing her shared link, here is my response. You omitted one class in the "width90" div section. The parent of "width90" is a div with the class uk-panel, and after examining the entire structure of a similar section, I noticed that you missed the class uk-panel-box within the uk-panel. Make the following replacement:

<div class="uk-panel " align="center">

with

<div class="uk-panel uk-panel-box" align="center">

The rest of my media query code is functioning correctly. For devices under 960px, the width will be 100% as specified, while above it will be 90%.

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

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

What is the best way to position this grid container directly beneath the search box using absolute positioning?

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique Starter</title> ...

What is the process for invoking a server-side Java function from HTML with JavaScript?

Can someone help me figure out the best way to invoke a Java method from HTML (I'm working with HTML5) using JavaScript? I attempted using Applets but that approach didn't yield any results. My goal is to extract the value from a drop-down menu i ...

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

The chosen option from the drop-down menu cannot be shown on the screen

I have developed an application that you can access for testing purposes APPLICATION, but I am encountering some minor issues that I'm struggling to resolve. Despite having correct queries, the selected module is not being displayed in the code sn ...

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

What could be causing my AJAX script to not execute upon form submission?

My form's ajax functionality is not working properly. When I try to submit the form, nothing happens. Can someone please assist me with this issue? $( '#my-form' ) .submit( function( e ) { $.ajax( { url: 'u_mainslid ...

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

Limitations on Embedding Videos with YouTube Data API

I have been using the Youtube Data API to search for videos, but I am encountering an issue with restricted content appearing in the results. Specifically, music videos from Vevo are showing up even though I only want videos that can be embedded or placed ...

Discovering the identification of a comment in JavaScript

Here is the code snippet I am working with: <a onclick="lel($(this),'212345555')" class="button"> <a onclick="lel($(this),'241214370')" class="button"> <a onclick="lel($(this),'248916550')" class="button"> & ...

What causes the cancel button to add spaces and create a line break in the textarea field?

Whenever I click the "cancel" button, the textarea inexplicably receives 26 spaces before any existing text and a carriage return after it. This issue occurs when the cancel button is styled in the traditional HTML manner: <button type="reset" name="re ...

Having trouble with CSS Locator identifying an element in your Protractor Test?

In the Protractor test snippet below, I am attempting to calculate the quantity of div elements using the CSS locator: let list = element.all(by.css('div[class="ag-header-cell ag-header-cell-sortable"]')); expect(list.count()).toBe(11); ...

The issue of border-radius and shadow box inconsistency

I'm trying to style a div with the following properties: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt; } <div class="example"> </div> ...

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

Identify a CSS style or attribute that is being dynamically assigned using JavaScript

While using the Jquery Cycle plugin for my slideshow, I'm looking to trigger an event when a specific slide is active. The Cycle plugin handles this by adjusting the opacity of images within a div in this manner: <div style="position: absolute; to ...

How to Build a Chatbox using AJAX, HTML, and C#?

Currently, I am incorporating the Nancy Web Framework into my C# Console Application to develop a user-friendly Web Administration panel for my software. In this project, I have chosen to utilize the Spark View Engine due to its simplicity in handling HTML ...