When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback.

@media (max-width: 735px) {... }
@media (min-width: 735px) {... }

@media (width: 320px) {... }

@media (width: 360px) {... }
@media (width: 375px) {... }
@media (width: 414px) {... }

I have tried using the max-width property without success. For some reason, the browser always selects a different max-width expression. This is why I decided to manually collect the widths of mobile phones.

Additionally, I want to display the same content for devices with widths of 360px and 320px. Is there an "or" expression that could help me simplify this?

cssmedia-queries

Answer №1

Based on your question, you may want to consider incorporating the following media query. 

@media (min-width: 320px) and (max-width: 360px) {
  html { color: blue; }
}

It is advisable to adopt either a mobile first or desktop first approach using media queries. This way, you can cater to different screen sizes without having to write specific exceptions.

Mobile first

html { color: purple; }

@media (min-width: 600px) {
  html { color: black; }
}

/* Progressively enhance */

Desktop first

html { color: purple; }

@media (max-width: 600px) {
  html { color: black; }
} 

/* Regressively adjust */

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

What is the method for altering the look of a button using JavaScript?

As a beginner in web development, I have a question. Typically, I know how to style the submit button when it's created in the HTML page using CSS. However, I'm wondering if it's possible to apply CSS styling to the JavaScript block instead. ...

javascriptjqueryhtmlcss

The collision between the Textfield Label and Value is being caused by Chrome's Autofill feature

When using React, I noticed that Autocomplete Chrome values don't trigger the onChange event right away. This leads to an issue where there is a collision between the MUI TextField Label and the actual values during the initial page load. How can I go ...

htmlcssreactjsgoogle-chromematerial-ui

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

javascriptwebkitcss

Guide for positioning buttons in front of an image using HTML and CSS

I need assistance placing buttons in specific positions above an image carousel using HTML and CSS code. Despite researching various resources, I am unable to resolve this issue. This is the HTML implementation: <!-- Image where buttons should be placed ...

htmlcssbootstrap-4

Show the table within the flex container

I have a question about CSS. Is it possible to apply display: table to a flex item? Whenever I try to do this, the layout doesn't behave as expected - specifically, the second flex item does not fill the available vertical/horizontal space. .conta ...

cssflexbox

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Currently, I am in the process of developing an application designed for LTR usage, but I am interested in adding RTL support as well. The application itself is built on top of Material UI React. By using CSS Flex Box, I have managed to rotate the applicat ...

javascriptcssreactjsmaterial-ui

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

I came across a helpful article on Stack Overflow about Flex-box and how to align the last row to the grid. I'm interested in implementing it in my project: .grid::after { content: ""; flex: auto; } However, I'm not sure how to inc ...

javascriptcssmaterial-ui

Styling elements with pseudo-classes when a horizontal scroll bar is activated

I have been experimenting with CSS pseudo-classes, specifically the before and after classes. While I have had no issues with the before class, I am running into a horizontal scroll problem when using the after class. I want to avoid using overflow: hidde ...

htmlcss

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...

csstwitter-bootstraptwitter-bootstrap-3

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

jqueryhtmlcsssticky

What are the steps to add SVG effects to an image or div element?

Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary. The objective at hand is to transform an image, assuming that the source ...

htmlcsssvgsvg-filters

show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...

htmlcss

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

Header not displaying properly on website

Link: test.getfamo.us Problem: The drop-down menu is not functioning properly when hovered over due to the main box covering it. I initially avoided using percentages for height in my website design, but after facing display issues on different monitors, ...

htmlcss

A guide on monitoring SASS files in all subdirectories with an npm script

Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...

cssnpmsassdart-sass

The erratic nature of Tailwind actions

Currently, I am immersed in a Livewire project and attempting to implement some Tailwind theme configurations. However, the process does not appear to be coherent whatsoever. Here is an excerpt of my Tailwind configuration: theme: { extend: { f ...

csslaraveltailwind-csslaravel-bladelaravel-livewire

Implementing a delay in a CSS menu design while still ensuring compatibility with browsers that do not support JavaScript

I currently have a three-tiered menu that relies on :hover and is controlled by css alone. I am now looking to introduce a slight delay to the hovers, which means transitioning my css :hovers to a .hover class and incorporating jQuery. My concern is whet ...

jqueryhtmlcss

I am looking to adjust the placement of a brief Bootstrap code snippet for "Radio-Inline."

I need help customizing a Bootstrap 5 radio-inline snippet. <div class="col-md-6 col-md-offset-3 form-container"> <div class="row"> <div class="col-sm-12 form-group"> <div class=&qu ...

cssbootstrap-5

Guide to updating the background color of an element with AngularJs when clicked

I've used AngularJS's ng-repeat to display a list of <div> elements. When I select one <div> (div1), its background color changes to blue. If I then click on another <div> (div2), div1's background returns to white and div ...

htmlcssangularjsangularjs-ng-repeatonfocus