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.