In order to ensure proper coverage for phones, tablets, and standard screens across various widths, it is essential to implement the

As I delve into my project focused on responsive design and media queries, I have been studying resources like Aaron Gustavson's book, Adaptive Web Design, and Ben Frain's Responsive Web Design with HTML5 and CSS3, along with various online sources. Despite this, I am still unsure about implementing media queries for specific widths.

Our approach draws inspiration from twitter bootstrap style, aiming for a snap-in-place effect rather than a fluid layout.

We have identified 3 types of devices:

  • Mobile - variable size
  • Tablet - 980px (both landscape and portrait)
  • Screen - 1160px

My main question remains: which media queries should I utilize to cater to these types? Any assistance would be greatly valued, as this is proving to be a challenging aspect for me.

htmlcssresponsive-designmedia-queries

Answer №1

Exploring different strategies, the LESS framework and Twitter Bootstrap offer unique approaches.

LESSframework caters to 4 modes:

  • Large - 992px width and above
  • Tablet - 768px width
  • Mobile 1 - 480px width
  • Mobile 2 - 320px width

Twitter Bootstrap focuses on five:

  • Large - 1200px width and above
  • Big - 980px width
  • Tablet - 768px width
  • Mobile 1 - 480-767px width
  • Mobile 2 - less than 480px width

Consider utilizing a responsive CSS framework like these or the flexibility of LESS/SASS to accomplish your goals effectively.

Answer №3

Embrace a versatile approach to media queries:

Adapt to various screen sizes by leveraging responsive design to make your layout flexible and adaptable.

The market is flooded with a multitude of devices featuring different screen sizes. Instead of targeting specific dimensions, focus on using viewport ranges for a more effective design strategy.

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

Is it possible for me to create a Pomodoro clock similar to this one?

Can you provide guidance on creating a Pomodoro clock similar to this design: https://i.sstatic.net/qhd1Z.png As time progresses, the arrow should move around causing the circumference of the circle to increase. What approach or library would you recomm ...

javascriptjqueryhtmlcss

Center an image vertically in an AdminLte content-wrapper division

I am currently utilizing an AdminLte template as the framework for my design. In the designated area where I need to insert the main content, it is structured in the following manner: <div class="content-wrapper"> <se ...

htmlcsslaravelbootstrap-4

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

htmlcsswebshop

Modify the border in jQuery if a specific div exists within a list item

Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...

javascriptjqueryhtmlcss

Is the input box failing to show up on your screen?

I recently tackled the task of creating a commenting feature for RSS articles Throughout my journey with PHP coding, I encountered an issue where the input box for comments was not displaying. https://i.stack.imgur.com/gJIlu.png Check out the snippet fr ...

phphtmldom

Utilizing JQuery to track DIV clicks

I am encountering an issue with DIV clicks while using JQuery. I need guidance on this problem. Within my HTML, there are three designated DIV elements: <html> <body> <div id="overviewContainer"> <div id="firstContainer"></ ...

jqueryhtmlclick

What is the best way to align all of my content to the center in HTML?

In my web design class, I encountered an issue while creating a page. Currently, my page consists of a navigation bar and an image. I wanted to center both elements using CSS. display: block; margin-left: auto; margin-right: auto I applied this CSS to th ...

htmlcss

Positioning the video tag bar in HTML is a crucial element to

**Take a look at what I'm discussing here(http://jsfiddle.net/VpLyR/). I'm dealing with a simple code that includes a video tag (html) and a menu bar with a fixed position. The issue arises when I scroll down to the point where both the menu bar ...

htmlcsspositionhtml5-video

Retrieve JSON data generated within a JavaScript-powered webpage

My issue involves two HTML pages: 1) The first HTML Page (page1.html): <html lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/ ...

javascriptjqueryhtmlajaxjson

Waiting for all promises to resolve: A step-by-step guide

I need to make two different API calls and perform calculations based on the results of both. To wait for both promises to resolve, I am using Promise.all(). const getHashTagList = async () => { loader.start(); try { await getAllHashTag ...

javascripthtmlcssreactjs

Utilizing jQuery to determine the placement of a tooltip within a slider

I am currently utilizing both a jQuery Tooltip and a jQuery Slider (jQueryUI) simultaneously. While the slider is functioning correctly, I am encountering an issue where tooltips are being displayed in the wrong position after scrolling (view screenshot or ...

jquerycssjquery-uislidertooltip

Real-time Broadcasts Straight to Your Web Browser

Feeling a bit frustrated with my current situation. I am eager to stream a live video broadcast to a web browser. At the moment, I am utilizing ffmpeg to stream a directshow live source as a webm stream to node.js, which then sends the stream to the http ...

javascripthtmlvideo-streaminghtml5-videohtml5-audio

Float over Material UI Icon and Text

Currently, I am tackling a React JS Project. My task involves creating a breadcrumb that contains both text and an icon. To accomplish this, I have incorporated a material UI icon. import UpdateIcon from "@material-ui/icons/Update"; ...

cssreactjsmaterial-ui

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

htmlcssangularangular-material2

Is it necessary to download the PDF file for accessibility purposes?

Currently, I am working on a website that includes downloadable PDF links. We are utilizing a parameter at the end of the file download URL to instruct the browser on how to handle the file: https://example.com?ref=0&download=y By using the download= ...

htmlpdfhyperlinkaccessibility

Why do CSS changes in Chrome Console only take effect locally and not when the website is live?

I recently encountered an issue where I wanted to incorporate negative margins into a specific section of my website, as seen in the Chrome Console (link to image): .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { -webkit-tr ...

htmlcss

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

jquerycss

The Github API checks are currently not properly parsing style attributes when given in the form of HTML within comment text

I have integrated github's create check run API to create a check run for my pull request. The JSON structure I am using for the request body is as follows: { "name" : name, "head_sha" : script.env.CI_COMMIT_SHA, ...

htmlgithubcontinuous-integrationgithub-check-run

Click on a link to open it in the current tab with customized headers

In my Angular project, I am attempting to open a link by clicking a button that redirects to the specified URL using the following code: window.open(MY_LINK, "_self"); However, in this scenario, I also need to include an access token in the header when t ...

javascripthtmlangularajaxtypescript

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

I am in the process of developing a lengthy form using the jQuery plugin called formToWizard. Within one of the fieldsets located midway through the form, there are hidden fields that are displayed upon clicking a button. The strange issue I am encounterin ...

jqueryhtmlcss