Creating CSS media queries for two specific breakpoint ranges can help to optimize the layout

My current design presents a challenge on larger screens (1400px+) where there is a wide content area with three side columns. As the screen size decreases, the number of aside columns reduces and the main content shrinks accordingly. This situation requires me to use media queries to adjust styling as the layout shifts.

The problem arises when the browser resolution drops below 960px, causing all containers to occupy a single line width, making the main container appear larger again. I want to maintain consistent rules for resolutions 1400px+ which look much better. Additionally, I need to revert back to the one-line layout below 768px.

I've attempted to segregate styles using 

@media only screen and (min-width: 960px) and (max-width: 1400px)
, but now I wish to include these same styles for resolutions below 768px without duplicating my code. Is it possible to achieve this seamlessly?

cssmedia-queries

Answer №1

See the Demo

Alternatively

Separated by commas.

@media 
  only screen and (min-width: 960px) and (max-width: 1400px),
  (max-width: 768px) {...
}

In a technical sense, these are considered as two separate media queries, but they essentially function like an or statement.

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

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

javascripthtmlcssangulartypescript

Tips for designing a horseshoe-inspired meter using CSS

  I want to create a horseshoe-shaped gauge using CSS that resembles the image below:     My attempt involved creating a circle and cutting off the bottom, similar to the technique demonstrated in this fiddle: http://jsfiddle.net/Fz3Ln/12/   Here& ...

javascripthtmlcss

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

javascriptcss

Utilizing inline styles with the asset pipeline feature in Rails

<%= link_to root_path do %> <div class=""> <div style="background-image:<%= image_tag " image1.png "%>"> </div> <div> <h2>Title</h2> <p>Paragraph</p> </div& ...

cssruby-on-rails-5asset-pipeline

Considering a background image for your email form?

I'm trying to create an email form with a background image for the entire form. I've attempted using CSS background-image and HTML to set the background image, but so far no luck. Most tutorials only cover how to add an image inside a text box ( ...

phphtmlcssimagebackground

Show Navbar Toggler only when in Portrait mode on mobile devices, not Landscape mode

Attempting to create a responsive website utilizing Bootstrap 4, I encountered a problem with the menu expanding in Landscape orientation on mobile devices, causing distortion. How can I ensure the menu stays collapsed in Landscape orientation? Despite ha ...

cssbootstrap-4

Retrieve the current value of an item by scrolling through it

I have a functioning sample of a scrollable with item numbers 1 - 24. I am trying to retrieve the value of the current item, but my attempts to use alert have failed. How can this be achieved? Here is my code: UPDATE QUESTION: I managed to obtain the inde ...

jquerycssjquery-uijquery-plugins

SVG with a background image that is centered

Looking to include a centralized image within an SVG. This image will act as a user avatar, but my attempts have been unsuccessful so far. .body { width: 100%; height: 100%; background: #1f1b33; padding: 2rem; } svg { width: 120px; } <div ...

htmlcsssvg

What's the best way to align text at the center of this DIV?

I recently created a small offline website with a header that includes a logo, navigation bar, and notification bar. While I managed to align everything as intended, I encountered an issue with the text alignment within the notification bar (header-alert). ...

htmlcsscentertext-align

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Craft a dynamic countdown timer that blinks using CSS

I am attempting to design a blinking countdown timer that starts at 5 seconds and disappears when it reaches 0. CSS: .blinky { transition: 1s opacity; -moz-transition: 1s opacity; -webkit-transition: 1s opacity; } HTML: <div id="count ...

javascriptcss

What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...

htmlcss

Has Heroku caused your CSS Stylesheet to fail to load after deployment?

I've been struggling with understanding the asset pipeline in Rails 4 for some time now. I managed to figure out how to pre-compile assets, but after deploying my application, the CSS stylesheet doesn't seem to be updating. To confirm this, I ch ...

cssruby-on-railsrubyherokuasset-pipeline

What is the best way to maximize the size of an image without causing the parent div to expand in height?

I have utilized the code below directly from the example provided at https://getbootstrap.com/docs/5.2/utilities/flex/#media-object. This code is meant to generate a box containing an image on the left and text on the right: <div class="mycard bord ...

csstwitter-bootstrapbootstrap-5

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?

Hey there! I'm currently working with Silverstripe CMS using the "Simple" template. I'm interested in finding out how to add subtitles to my menu items. Here's the current structure of my navigation template: <nav class="primary"> &l ...

phpcsscontent-management-systemsilverstripe

Checking for the existence of a CSS selector in Jasmine test suite

Testing out the latest version of Jasmine and Karma with an AngularJS instance. I attempted: expect(element('a.topic-heading-link-10')).toBeDefined(); However, I received this response: expect undefined toBeDefined undefined http://example.co ...

cssangularjsjasminekarma-runner

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

javascripthtmlcsstextarearichtextbox

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...

javascriptjqueryhtmlcss

Is there an automatic bottom padding feature?

Currently, I am facing a challenge in fitting the loader into the container without it being overridden by the browser. Using padding-bottom is not an ideal solution as it results in the loader appearing un-resized and unprofessional. Any suggestions or co ...

cssreactjstypescript