CSS Device Media

I am currently working on my first website and I am striving to develop a responsive layout. Below is the HTML code I have implemented:

<link href="css/web_desktop.css" rel="stylesheet" 
type="text/css" media="screen and (min-width:481px)" />

<link href="css/web_mobile.css" rel="stylesheet" 
type="text/css" media="screen and (max-width:480px)" />

While this layout functions well when viewed on my laptop by resizing the browser, it fails to work properly when accessed on my iPhone after uploading it. I attempted to move the code into my web_mobile.css file as shown below:

@media screen and (max-device-width: 480px) { }

Unfortunately, even after this adjustment, the issue persists.

I am seeking suggestions from you all. Can multiple CSS media queries be utilized? Your insights would be greatly appreciated.

htmlcss

Answer №1

To apply different styles to your website based on screen size, include media queries directly in your .css file. You can easily switch between styles within the media queries just like you would normally.

For a variety of media query options, check out this comprehensive list here.

You only need one .css file if you place your media queries inside it. This means you don't have to use the media attribute when linking to your .css file because all the queries will be contained within the file itself.

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

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

javascriptjavaandroidhtml

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

I'm working on a counter that can either count backwards or in ascending order based on requirements. The counter is functioning correctly, but I want to add text to accompany each number as it counts. The issue is that the text changes every time the ...

javascripthtmlcss

Tips for preventing a div from overflowing in col-md-12 in Bootstrap 3

Is there a way to maintain the same width for the image and div below? Everything looks good until the window size is between 545px to 575px. The .header width changes only at col-md-12. How can I preserve the aspect ratio? VIEW SCREENSHOT CODEPEN LINK ...

htmlcsstwitter-bootstrap-3

When an image is clicked, I am interested in loading HTML content

I am trying to implement a feature where a local HTML page can be loaded within a div to replace an existing one without the entire page having to reload. An example of what I want to achieve can be seen at . When you click on the game image, the player i ...

javascripthtmlajax

What is the best way to create a layout for Flexbox project boxes with three boxes per row?

My project cards are displaying in a single horizontal line and expanding infinitely to the right, rather than appearing in rows of three as intended. This causes them to extend outside the visible area in a long horizontal strip. See the issue in action ...

htmlcssflexbox

Error encountered in onclick handler due to unterminated string literal in PHP and jQuery

Trying to utilize PHP to send variables into the onclick of an element is resulting in an "Unterminated string literal" error due to long strings. Below is a snippet of my PHP code: $query = $conn->prepare("SELECT Name, Image, Description, Link, Price, ...

javascriptphpjqueryhtml

Conceal the link until the div is hovered over

Is there a way to hide the [Add|Edit] link and only show it when hovering over the handle? The desired outcome is to display "001-001 Item 6" by default, as illustrated in the image. .dd-list { display: block; position: relative; margin: 0; paddin ...

htmlcssasp.net

Navigating a series of HTTP requests with VBA and saving the retrieved data in Excel 2010

I have a total of 5 Excel files that I currently use with WinHttpRequest to extract data into them. My goal is to consolidate all the requests into a single VBA script, loop through them, and store the data sequentially on one sheet. However, I am facing ...

htmlexcelvbaweb-scraping

Various instances of the jQuery niceScroll plugin

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

jqueryhtmlcssscroll

Issue encountered with fetching multiple data from database using checkboxes and a submit button

I am facing an issue with my shop page. I have the categories listed in checkboxes, and below that, I want to display only the checked categories after pressing the submit button. However, I'm not getting any feedback upon submission. When I replace ...

phphtmlmysql

"Creating Unequal Columns in Bootstrap 4 Without Using a 12-Column Grid System

I am working on a small web application and I want to display 5 columns with equal width that are responsive. However, I only want this layout to be visible on devices with a width of ≥992px. For devices with a width <992px, I want the 5 HTML element ...

csstwitter-bootstrapflexboxbootstrap-4

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

Tips for making a div expand to take up the available space on the left side of a taller div

Could you take a look at the scenario below? I'm attempting to position my yellow div beneath the red div and on the left side of the lower part of the green div. When I apply clear: left, it moves down but leaves empty space above it. Is there a way ...

htmlcsspositioningfloating

How do you create space between a label and a textbox within separate <td> elements in a single row in a C# web application?

I need help formatting a label and textbox in a table row. I want to have the label right-aligned and the textbox left-aligned with a two-digit space between them. My current code is as follows: <table> <tr> <td align="right" class="s ...

c#asp.nethtmlalignment

What is the best way to insert an image into an HTML card?

I'm a beginner in PHP and I'm working on creating a registration form that should have a design similar to the picture linked below: https://i.sstatic.net/7P7bn.png However, the form I've created so far looks like this: https://i.sstatic. ...

cssbootstrap-4

Most bizarre glitch in IE9 found (disable internet, watch page display go haywire)

My local webserver (apache) on my laptop is successfully serving up a content management system that looks fine in both IE9 and Firefox. However, when attempting to demo it without an internet connection, the elements were misaligned and looked terrible i ...

csspositioninternet-explorer-9

Creating a JSON object for an HTML form with AngularJS can be easily accomplished by following these steps

Currently, I am diving into the world of AngularJS. I'm familiar with creating a JSON object for my HTML form using jQuery, but now I want to do it with AngularJS. Can someone please guide me on how to accomplish this task in AngularJS? Your help is g ...

jqueryhtmlangularjs

EffortlessDrop.js and anchors

Currently using EasyDropDown.js to style a select element, which creates a modern dropdown menu using jQuery. I'm curious if it's possible to include a hyperlink in one of the select options. Here's an example of what I'm trying to ach ...

javascriptjqueryhtmlselecthref

How can I use AngularJS to filter ng-repeat values based on the input ng-model value of another field?

Can I Repeat Values Based on Another Input NG-Model Value in AngularJS? There is one input value, let's say Social Psychology, and the corresponding ng-model for this value is kpcategory. I am using ng-repeat="question in questions" to list all ...

htmlangularjsmeanjs

Struggle with the accordion collapse animation in Bootstrap4?

My implementation of accordion collapse in Bootstrap 4 is functional, but lacks smoothness. Can anyone offer suggestions on how to improve this? I have attempted to nest divs inside each other, but it has not yielded the desired outcome. Below is the code ...

htmlcssbootstrap-4