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

Tips for customizing icons when hovering in CSS

I'm trying to make a default icon light up on hover using CSS, but I'm having trouble getting it to work. Any suggestions on how I can achieve this effect? Thank you! HTML <ul class='nav nav-main nav-sidebar'> <li role=&apos ...

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

Creating a Date Computation Tool that Adds Additional Days to a Given Date

I have a challenge where Date 0 represents the start date, Date 1 is the result date after adding a certain number of days (NDays). I am looking for help in JavaScript to calculate Date0 + NDays = Date1. Please assist me as my coding knowledge is quite l ...

Pressing the tab key while using Angular will halt any additional processes from running

I recently integrated a search bar into my Angular application. When I enter text in the input field, a customized dropdown menu appears below it. However, when I press the tab key, I expect the dropdown to close and for the focus to shift to the next inpu ...

What is the method for achieving a seamless rosace effect in CSS?

While working on my website, I added an interesting effect to a circle. Currently, the circle opens automatically when hovering the mouse over it and closes when the mouse moves away. However, I would like to modify it so that it automatically opens and cl ...

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

Utilizing browser's local storage to dynamically update text in buttons and panels

In my file, I have the following code snippet (I've removed other irrelevant code) <div data-role="panel" id="loc_panel"> <h2>Panel Header</h2> <p>info about this stop</p> </div> <!-- /panel --> < ...

In Internet Explorer 8, the PNG image is visible but in IE7, it myster

I have been trying to showcase a logo (PNG created in Paint.NET) on my website (XHTML 1.0 Transitional), using the following code: <body> <div class="header"> <div class="logo"> <img src="logo.png" /> </div> ...

Shopify revamping the design of the collections

Looking to enhance the layout of a collection page by moving from a single column to having at least three items per row. The current layout can be viewed here Proposed new layout example shown here 1: Below is a snippet of the code I believe needs adj ...

Navigating through HTML content and extracting specific elements

After using an ajax call to retrieve the partialView HTML of a page, I need to extract information from the main div before displaying it. This data specifically relates to the size information in order to create a floating window. Here is the code snippe ...

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps: 1.) Begin by clicking on a category 2.) The filtered products will be displayed 3.) Select the desired products from the filter 4.) Once selected, the products will appear in the rightmost part of the screen within t ...

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

Text successfully inserted into the input field using Xpath

I need help with the following issue: I am trying to use Selenium to verify if an input field contains a specific text that has been manually entered. Here is an example of an input field with the value '50': <input type="text" class="value ...

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...

Gulp fails to generate a CSS file after compiling Sass to CSS

Recently, I've been having trouble compiling my sass file to css. Even though it was working fine before and I haven't made any changes, now my CSS file is empty. Below is the task I am trying to accomplish: gulp.task('sass', function ...

What steps do I need to take to create a basic API that links to a MySQL database?

I'm currently trying to develop an API for PHP that will enable one web server to communicate with another web server. Additionally, I want this API to be able to update MySQL code. Previously, I was utilizing $_GET parameters for this purpose but rea ...