How can I target a media query just for my MacBook? I keep getting distorted images [Willing to pay £ for help]

Anki Desktop
1 
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

.centered-block {
    display: inline-block;
    text-align: left;
    max-width: 85vw;
}

img {
  display: block;
  margin: 10px auto -15px auto;
  width: 600px;
  max-width: 85vw;
  height: auto;
}

/* iPhone 13 Pro Max: 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {		

		.centered-block {
			max-width: 90vw;
		}

		img {
        	max-width: 90vw;
        	height: auto;
			margin-bottom: -20px;
    	}

 }

/* Macbook Pro - DOES NOT WORK*/
@media only screen 
  and (min-device-width: 1280px) 
  and (max-device-width: 1440px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    img {
        max-width: 300px;
    }
}

image
image1168×1362 167 KB

As shown In the image above, pictures on Anki appear distorted presumably because the width is set to 600px. The reason I’ve done this is because when I take screenshots and paste, without a width specified the images are too big and I can’t view them easily.

Any ideas please?

Happy to transfer £5 on PayPal if anyone can help me as I have exams and really need these cards to work.

2

Use object-fit property. I suggest using object-fit: contain; as this will keep the aspect ratio, resize it to fit the given dimension. Link: CSS object-fit Property

Solution 2: is using background-size function to automatically allow the image to fit according to the Anki Window size. Link: Responsive Web Design Images

Also, I believe you do not need @media query for macbook pro. I do believe that complicates the styling. You only need @media for iPhone/iPad/Tablets

3

Hey thanks so much for this!

The thing is I don’t want it to just fill up the space as I want to keep the pictures fairly small so I can see the entire text without scrolling. Should I remove max-width and replace with just width + object-fit?

Also did you want the £5 via PayPal? If it works feel free to DM me as you saved me a lot of hassle and time as I was struggling a lot

4

Yes, remove max-width, and use width and object fit under img.

And no thank you. I understand the struggle, hence thankful for this community to help me understand CSS, HTML, Python, and more recently RegEx. Advice on here tends to be free so lets keep it that way!

2 Likes
5

Ah okay got it. Thank you so much - I really really appreciate it!

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.