Optimizing CSS breakpoints for high-resolution retina displays with Bootstrap

I've been trying to figure out how to adjust the CSS media queries on a retina display to match the smaller screens of laptops.

Here's how it currently appears on my MacBook with a 1920 x 1080 screen:

https://i.sstatic.net/06cmP.png

I want it to look more like this, similar to how it appears on a smaller screen:

https://i.sstatic.net/iEw8x.png

The current media queries are as follows:

@media screen and (min-width: 500px) and (max-width: 767.9px)
@media screen and (min-width: 768px)
@media screen and (min-width: 960px)
@media screen and (min-width: 992px)
@media screen and (min-width: 1200px)
@media screen and (min-width: 1440px)
@media screen and (min-width: 1660px)
@media screen and (min-width: 1920px)

If anyone has any advice or tips on how to achieve this, I would greatly appreciate it.

Answer №1

If you want to include high-quality graphics, make sure they are only displayed on screens that can take advantage of them, such as retina displays. You can use the -webkit-min-device-pixel-ratio property for this purpose.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Styles specific to Retina displays here */
}

You can also target other higher resolution screens with different pixel ratios:

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Styles specific to 1.25 device pixel ratio here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Styles specific to 1.3 device pixel ratio here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Styles specific to 1.5 device pixel ratio here */
}

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

Ensuring Consistent Image Resolution Across Multiple Servers Using Cloudinary in Rails

In my app, I have a search page filled with results from scraped content. Each result includes an image sourced from an external URL. My goal: To ensure that each image has the same size and can be placed within Bootstrap's grid system. <%= cl_im ...

Get rid of the gutter in the Bootstrap 4 grid system

When working with Bootstrap 4, the task is to customize the default grid system for desktop screens like this: https://i.sstatic.net/ZoEem.png specifically, setting the container and desktop breakpoint at 1280px. The example attempted is : body ...

Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

Having trouble customizing a particular view within Angular

I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...

Using HTML <style> in a bash script is a great way to enhance

I am attempting to eliminate the bullet points from HTML code generated by a bash script. I am currently struggling to apply the style across the entire program. Given my limited knowledge of html, I suspect that I may be misinterpreting or incorrectly p ...

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

Printing doesn't display CSS styling

I am currently working on creating a function to change the font color, however, I am facing issues with the CSS when it comes to printing. Here is the code I have: $('#draw').on('click', 'p', function () { if($(this).ha ...

Tips for positioning a badge alongside the final line of a multi-line header element?

Is there a way to vertically align a smaller badge next to the h1 tag, without placing the span tag inside the h1 tag for SEO reasons? Currently, the badge is aligned at the bottom, but I would like it to be in the middle. <link href="https://cdn. ...

Position a fidget spinner in the middle of a button

I'm currently working on centering a spinner inside a button. The purpose of the spinner is to indicate that the system is processing a response. Despite my efforts to adjust margins and padding in the code, the spinner remains at the bottom of the bu ...

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

Is the presence of hidden list items leading to excessive white space?

I have a menu that appears when hovering over a list item. Here is an example: <li> <ul class="topmenu"> <li class="submenu"> <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt= ...

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

Using HTML and CSS, generate the convergence of lines and a circle

Could someone guide me on how to display a pointer on a world map, similar to the one shown below? I managed to create a circle using HTML/CSS. Here is the code for the one I created: .circle { border-radius: 50%/50%; width: 50px; height: 50px; backgrou ...

Why might a responsive website automatically switch to mobile view?

My website has a responsive grid system that utilizes media queries with breakpoints. However, I am encountering an issue on IE8 where the "mobile version" of the site is being displayed as the default view even when the screen size is set to what should b ...

Arranging columns with Bootstrap

I have a unique design using Bootstrap as shown below: <div class="row"> <div class="col-md-2"> 1 </div> <div class="col-md-8"> 2 </div> <div class="col-md-2"> 3 </div> </d ...

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

Tips for eliminating excessive spacing between words to achieve justified alignment on a mobile device

please add image description hereMy issue is with using text-align: justify; as it sometimes creates large gaps between words. I attempted to resolve this for mobile devices by using text-justify: inter-word;, but unfortunately, it did not work. @media sc ...

Tips for aligning a button in the center of an image across different screen sizes using CSS or bootstrap

I currently have a centered button on my hero image, but the issue is that I would need to use multiple media queries to ensure it stays centered on all screen sizes. <style> .hero-container{ position: relative; text-align: center; } .her ...