Media query unable to fetch the appropriate CSS file

After reading an interesting article at , I have been experimenting with different ideas. One of my goals is to dynamically load a specific CSS file based on the device size accessing my website.

Below is the code that I am currently using:

 <link href="<?php echo base_url()?>assets/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="<?php echo base_url()?>assets/css/rh-mobile.css" />
    <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1280px)" href="<?php echo base_url()?>assets/css/rh.css" />

In both the 'rh' and 'rh-mobile' CSS files, I have defined the following class:

.hero-unit {
  background: url("../img/ipod5.jpg");
  height: 4em;
  width: 15em;    
  padding: 0.5em;
  margin-bottom: 2em;
  background-color: #eeeeee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

The main difference between the two CSS files is the image being used. The mobile version displays 'ipod5.jpg' while the desktop version uses another image.

However, during testing in Firefox, I have noticed that neither CSS file is being loaded except for 'bootstrap.css'. Can someone help me identify what might be the issue here?

Answer №1

Utilizing bootstrap's responsive features is a great way to ensure your website looks good on all devices. Also, make sure to include the base URL in this format:

<?php echo base_url("assets/css/bootstrap.css")?>

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

"Enhance the Navbar with a pop of color by changing

https://i.sstatic.net/dHKsV.pngMy Navbar is already defined and working perfectly, but I want to add a full-page background to the Navbar links. Currently, on mobile devices, the link backgrounds do not cover the entire page horizontally and instead look l ...

Implementing Bootstrap attributes into a personalized Vue.js component

I have been tasked with incorporating a new html page into a vuejs project. The page is fully developed and utilizes jquery along with various elements from twitter-bootstrap. I have created a new component. NewPage.vue <template> <div id=" ...

Prevent DIV from being filled by background color

Currently, I am working with a PNG image that has a transparent area resembling a torn checkout receipt with a zig-zag edge. This image is intended to function as the bottom part of a div that has a white background to mimic a till receipt. In my attempt t ...

Can the text box be set up to scroll vertically as you type?

Is there a way to create a vertical scrollable HTML text box that automatically moves to the next line when reaching the width of the textbox while typing, similar to a textarea but without actually using a textarea element? ...

Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images? Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for borde ...

Allow users to manually resize <td>'s within a platform

Looking for a way to allow users to manually resize a textarea and iframe in a system I am developing. Here's an example of what I mean: <body> <table width="100%"> <tr> <!-- I want the user to be able to re ...

The tab panels are failing to function properly due to the maxcdn CSS integration

I am struggling to make my basic JQuery code work, specifically to show and hide panels when a list item in the menu is clicked. The CSS I am using is from max cdn, so I'm unsure if I need to create my own CSS file for this. <!DOCTYPE html> ...

An image tag acts in a similar way to a div element

I'm a bit confused about how the picture tag works in relation to an img tag when its parent has 'display: flex' applied. When I set width: 50% on the img tag, it doesn't make the image 50% of the div but rather 50% of the picture eleme ...

How can I create a layout with cards that are arranged differently on wide screens compared to mobile using bootstrap?

Having trouble with my bootstrap 5.x layout. Can anyone help me achieve a design where the cards display like the left image on desktop/wide screens and like the right image on smaller width mobile screens? I currently have the mobile view showing A-B-C-D- ...

Placing an object to the right side

I'm currently developing an app using React Native and I need to position something on the right side of the screen. <View style={searchDrop}> <TextInput style={textInput} placeholder="Search Coin ...

Tips on ensuring Material-UI Datatable adapts to varying window dimensions

I am facing an issue with the responsiveness of my MUIDatatables. The table is not adjusting properly to different window sizes. I specifically want each row in the table to be displayed on a single line and utilize horizontal scrolling. I attempted to pl ...

Activate hover effect on desktop screen (excluding tablets and phones) by utilizing media queries

Applying hover state styling to a div can be done like this: div { &:hover { color: red !important; border: 3px solid red !important; } } To exclude iPads and other tablets from this CSS style, you can util ...

The glitch in the horizontal dropdown menu

Could you please review this Fiddle link: https://jsfiddle.net/wd9wj7oe/1/ The CODES are as follows: HTML <nav id="navigation"> <ul class="menu"> <li><a href="#">home</a></li ...

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

CSS styles are not getting rendered by Firefox when loading content using jQuery AJAX

My website allows users to comment on books and articles, with a search input to find relevant sources. Using jQuery, I dynamically load new sources from an outside site based on search terms and display them in a list using AJAX. However, I’m facing two ...

Tips for customizing the scrollbar appearance in ngx-datatable

Currently, I am utilizing the ngx datatable within my Angular application and have come across an issue with customizing the scrollbar style specifically for this table. .ngx-datatable::-webkit-scrollbar-track{ border-radius: 8px !important; } Unfortu ...

Guide to positioning an image at the center in jqm with the help of the Mosaic plugin

Recently, I started using JQuery mobile to create a mobile website for a local restaurant. To add captions to the images in the menu, I found and utilized the Mosaic JQuery plugin successfully. However, I encountered an issue with the alignment of images o ...

Design custom CSS for the buttons inside one specific jQuery dialog among many on the same page

I am trying to specifically style the buttons within one jQuery dialog out of multiple dialogs on my page. Typically, I would target all dialog buttons using: .ui-dialog .ui-dialog-buttonpane and .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset H ...

3D Carousel with Dynamic CSS, Perfect for Z-Axis Positioning

I am currently working on creating a 3D carousel using CSS and javascript. To view what I have accomplished so far, you can visit this page: Upon arriving at the page, please click the "initialize" button to transform the carousel into 3D space. By defaul ...

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...