Tips for controlling image sizes on larger devices while maintaining the appearance on Retina displays

I've been searching on the internet, but I got lost in complex explanations. I thought maybe someone here could help me out. :) I have a website with both mobile and desktop versions.

Most of it looks good on different devices but there are some elements, like images, that are too large on big screens.

I know how to set a max-width using "@media screen and (min-width: XXXpx)", but how can I also consider retina screens? I want only larger screens to be affected, not small ones...

Is there an easy solution for this?

For example:

.singel_image_container {
  display: inline-block;
  width: 60vw;
  margin-bottom: 7vh;
  margin-left: 2vw;
}

@media screen and (min-width: 1200px) {
  .singel_image_container {
    display: inline-block;
    width: 40vw;
    margin-bottom: 7vh;
    margin-left: 12vw;
  }
}

Clarification:

HTML:

<div class="singel_image_container">
      <img class="landscape_image" src="img/alven/1.jpg">
    </div>

    <div class="project_description">
      <h2><i>Ädno / Älven / The River</i> Blablabla</h2>
    </div>

CSS:

.project_description {
  float: right;
  width: 34vw;
  margin-right: 2vw;
}

.singel_image_container {
  display: inline-block;
  width: 60vw;
  margin-bottom: 7vh;
  margin-left: 2vw;
}

What I am looking to do is set a max-width for "single_image_container" and adjust the margin on the project_description for larger screens.

Answer №1

Media queries for resolution include min-resolution and max-resolution, and specifying screen width is a choice.

@media only screen and (min-resolution: 300dpi) and (min-width: 1300px) {     
   .singel_image_container {
         width: 60vw;
    }
}

You can find more information about this topic in an informative article by CSS Tricks 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

Styling just a single div when the state changes

I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want ...

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

Can content be easily added to the header section of numerous HTML files simultaneously, eliminating the need to access each file individually?

I'm facing a challenge where I have to include a stylesheet in numerous HTML files. It seems like such a tedious task to do it manually for each file. Are there any tools or solutions available that can assist me with this process? Or perhaps there ar ...

Css styling for text highlighting

It's been some time since I encountered a CSS problem, but here I am facing one. In short, I want to highlight text with a gradient background, which I managed to achieve using the <span> tag and setting a background image on it. However, I ran ...

A guide to creating smiley emojis using solely HTML and CSS

Is there anyone who can assist me in constructing this happy face? ...

What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering? functi ...

Adjust Text to Perfectly Fit Button

I am developing a quiz using bootstrap and javascript. One issue I encountered is that the text in the buttons can sometimes be longer than the button itself. This results in the text not fitting properly within the button, making it unreadable on mobile ...

Using HTML and CSS to Position Text Within an Image

Is there a way to position an image next to specific points on the screen so that it remains in the same place regardless of screen size? Here is what I am trying to achieve: https://i.stack.imgur.com/A5cop.png Using HTML, this is my desired setup: < ...

Error encountered while generating PDF using xhtml2pdf Pisa.CreatePDF() due to CSS parsing issue

Currently, I am referencing the xhtml2pdf instructions. I opted to utilize one of the provided sample html files and saved it as test.html: <html> <head> <style> @page { size: a4 portrait; @frame header_frame { ...

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

Vertical text frozen at the top of a table

My goal is to design a table with frozen threads and vertically oriented labels in the header. I have made an attempt at implementing this below, but as a newcomer to CSS, I am facing several challenges. One issue I've encountered with my solution ...

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

Achieving opacity solely on the background within a div class can be accomplished by utilizing CSS properties such

Whenever I adjust the opacity of my main-body div class, it results in all elements within also becoming transparent. Ideally, I would like only the gray background to have opacity. See below for the code snippet: <div class="main1"> content </di ...

Invisible and Unrestricted automatic playback

Why is auto play muted in both Firefox and Chrome? How can we code it so that browsers don't block it? Here's the code I'm using: <audio id="audio1" src="https://notificationsounds.com/storage/sounds/file-sounds-1217-relax ...

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

reconfigure form credentials with JavaScript

I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...

The cursor image fails to function when entering a specific area within the image

I have implemented a custom cursor using the code snippet below. $("div").css('cursor','url(../graphics/system/mybg.cur),auto'); However, I am experiencing an issue where the cursor reverts to the default pointer when hovering over a ...

Is it possible to convert an image into text using CSS just for the purpose of printing

Imagine having a prominent banner at the top of a webpage that you want to print. Instead of depleting someone's ink by printing the entire banner image, is it possible to utilize CSS to substitute the image with text in H1 size? ...

Issues with Bootstrap 5 navbar-light and font style rendering on Edge browser

My website seems to be having compatibility issues with Microsoft Edge. While everything works fine on Chrome, the navbar classes "navbar-light" and "bg-light" do not apply properly in Edge, and the font style defaults. I am using Bootstrap 5 and webfonts ...