Using different visual styles for mobile and desktop through media queries with development tools

Whenever I use dev tools to select mobile, my site (width 1440px) looks fine but if I choose desktop, the display is not correct. Do I need a specific media query for desktop devices? The only result that seems to work is when I select mobile-device on dev tools. When I pick desktop-device, it seems to use the same version as the tablet query.

Here are my queries: @media only screen and (min-width: 768px) and (max-width: 1023px) -for tablet- @media only screen and (min-width: 1024px) -for desktop-

Appreciate any help

Answer №1

It seems that the issue lies with the "Live Server" extension, possibly stemming from a recent update of VS Code.

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

When the OnSubmit function is called, it triggers three other functions and then verifies the return types. However, one of the functions is failing to be

Creating a form that collects user input, and upon submission triggers the check_three_func() function <form method="post" action="register_action.php" id="register_form" name="register_form" onsubmit="return check_three_func()"> <br> &l ...

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

Create a 3D vertical flip effect for images using CSS

Learning About HTML <div class="container"> <div class="wrapper"> <div class="im-fix"><img src="foo.jpg"></div> <div class="img-closed"><img src="foo-close.jpg"></div> <div class="img- ...

What is the process for creating a styled container with a title using css?

Trying to create a customized box with CSS, my code is as follows. Some attributes like width and height have been omitted due to restrictions on characters. .sponsor_info { border-radius: 10px; border: 1px solid #eeeeee; width:200px; height:50p ...

Change the order of flex items when a line break occurs

Is it possible to configure the line breaks so that the middle item is dropped instead of the last one? Also, how can I prevent elements a and c from breaking onto new lines? .container{ width: 80%; height: 31em; margin: auto; ...

JavaScript: Show Loading Screen until certain assets are fully loaded

Just a quick overview. I currently have a loading screen that appears before the website finishes loading for a specified time. What I'm looking to achieve is a method to check if certain elements are loaded and then remove the loading screen, rathe ...

Continuous Div Carousel with Looping in jQuery

I have developed a basic carousel to cycle through a series of divs, but I am facing some issues. I want the carousel to loop continuously so that after reaching "slide 07," it goes back to "slide 01." Unlike using a carousel plugin, I prefer having an ove ...

dividing a solitary string (plain text only, no HTML) evenly among three separate div containers

Recently, I encountered a frustrating dilemma. I'm trying to split a string between three divs, but they are not equal in height, so I can't divide the string based on character count. To illustrate the issue, I've created a small sketch. ...

Setting the root position of a div: How can it be done?

Imagine a scenario where a div element is designed to follow the mouse cursor on the screen. This functionality is achieved by manipulating the document's `mousemove` event and adjusting the div's `left` and `top` positions based on the event dat ...

What is the optimal backup plan for selecting rem as the font-size unit in a dynamic layout?

Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a ...

Adjusting nearby parts when hovering in CSS

I'm curious as to why the size of the second div does not change when hovering over the third div, unlike when hovering over the first div. #block { width: 50%; white-space: nowrap; } .div { display: inline-block; text-align: center; } di ...

The dark mode feature in Storybook is causing some trouble

Currently, I am utilizing storybook for my svelte + tailwind application and experimenting with implementing a dark mode toggle feature. In my tailwind.config.js, I included the following: module.exports = { darkMode: "class", Additionally, I ...

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

What is the best way to ensure that the text on the sub menus in the recipes navigation bar is displayed in vibrant colors?

Can anyone help me figure out how to make the blue hover effect fit perfectly with the subheadings in my recipes menu? Right now, the color doesn't cover the text fully. Feel free to read and run my code for a better understanding. This is the CSS I ...

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

Error: The typography-config in Angular 4.x is causing an invalid CSS issue in Sass

I'm looking to incorporate my custom fonts into my Angular 4.x project from the assets folder. I am also utilizing Angular Material for which I am defining custom typography in my styles.sass Below is the code snippet: @import '~@angular/materi ...

What is the best way to position a div next to a form field?

My current HTML code is shown below. <div class="field"> <label>E-mail address: </label> <input type="text" id="email" name='email' style="width:200px;"></input> < ...

Typescript Style Tabs: A Stylish Approach

I've been struggling to customize the tabs I created using this code, but nothing seems to be working as expected. This article was suggested to me recently, however, when I tried implementing it, I encountered errors. I also looked at this stackoverf ...