Until now, the size of our background image right here solely depends on the min width,
so once we are above our minimum
width right here, the height will be increased.
We have a normal height of 33vh for the mobile view
and of 30vh for the desktop view as you could call it.
Now for the the mobile phone,
this is totally fine
but if we say we have an iPad for example right here which means that our view already jumps into the
media query because the width is above our 40rem, let's maybe increase the size a bit, not that much, maybe
like that,
well then the problem could be that if we go to the landscape mode, that the image might be too big because
the width now is still above our limit for the media query but it could be that the height is not enough
now because width and height simply changed due to landscape and portrait.
Now the great thing would be if we could also consider the height at the same time, so we could say that
we only want to increase our image or apply this media query in case both criteria are met,
so we have enough width and enough height.
Now the cool thing is that we can do this because with media queries, we can of course address the height
but we cannot only address the height and the width separately,
we can actually address both by creating more complex media queries.
Now let's see how this works.
Basically we could simply add and write here and now specify a minimum height for our media query.
This simply would mean that the code for this media query will only be applied if both criteria right
here are met,
so we have a min width of 40rem and let's maybe say a min height of 60rem, so something rather big.
If we do that andre load our iPad right here, then you can see that our image didn't get any bigger
because both criteria were not met, did you see it?
If I turn that back to 40rem for example because then it would be applied, so if I reload, can you see it?
The image then simply uses the code we added right here.
So that's one way
how you could solve something like that, you can use such combinators to basically make sure that both
the min height and the min width are met.
If we then go back to our portrait mode for example, the larger image would be applied because we have
enough space for both the width and the height. Another thing we could do is, we cannot only combine it
like this with another minimum height,
we could also say that the orientation must be a specific one.
So if you write orientation right here and then for example say orientation should be portrayed like
that.
If that's the case and if we reload our device, we can see that the media query is applied right
here because we are in landscape mode
but if I turn the device, you can again see that this is now not our larger image because not both
criteria are met and therefore the normal, the mobile view for our image will be loaded.
I can also show you this for our plans because I think there, it becomes more obvious. If we now simply
another condition right here and this time maybe say orientation should be landscape, so only for
landscape devices our larger view should be applied,
if I now reload the page, you can see that nothing changes but for the mobile view, we're now back in our
mobile design because we now applied two different things. For our image up here, we'd simply said if we
have a minimum width of 40rem and the orientation of portrait which is the case right here, then please
apply that code right there. At the same time,
we said if we have also the min width of 40rem but the orientation should be landscape, then please apply
this code right here
and because of that, we can see that if we are in the portrait mode, the larger image and the app-like elements
are applied
but for the landscape mode, we can see that we have the smaller image and all the information right here
immediately.
So this is how you can specifically target the way your website behaves, not only depending on the width
of your device but also of combinations,
so of two different conditions met at the same time and additional information like how the user uses
its device, so in landscape or portrait mode. In addition to this and combinator, so this one right here,
we also have comma separated lists.
This means if I now simply change the end with a comma like that, then if one of these two conditions
is true, then the code will be applied.
This means we either have a minimum width of 40rem or the landscape orientation to display our website
according to this desktop view.
So if I reload the page now, you can see that in the landscape mode, this desktop side is applied but the
same thing is true for the portrait mode because for the portrait mode, this part, the min width of 40rem
is correct, so we have this minimum width,
therefore we can apply this code and for the landscape orientation,
well actually both are true,
for example even if I would increase the min width to 200rem and then reload the page, it would still apply
the desktop mode because although the min width is not equal to 200rem because it's only 1024 pixels
but the orientation is landscape,
therefore this desktop mode is applied right now.
Now the thing is that we don't need that right here actually, so we can get rid of this part of the
code
but if we go up here to our media query right there for the background image, the orientation portrait
could actually make sense
and I'm saying could because there is a problem with that. If I go back to the website and change right
here to the iPad back, then we can see that the smaller image is applied right here
and as soon as I switch it to portrait mode, the larger image is applied.
The problem is if I go back to my desktop view and now play around with the code, you can see that this
works fine right here,
now we are still in portrait mode, in portrait mode and now it jumps back to the initial size because
now, the width is bigger then the height and therefore, the portrait mode basically is no longer existing.
Therefore using this orientation portrait can be an idea but it's not the best one
if you also want to make sure that your website looks good on a desktop device.
Therefore what we will do right here is we will go back to a minimum height for our media query right
here and let's say the minimum height should be maybe 60rem, something like that.
Let's see if we reload the page
now, we can see that the media query is working fine again,
we have the mobile view which looks good
and then we have the desktop view for the bigger screens,
yes I think this looks nicer.
So keep that in mind, using portrait here can make sense but basically with these logical operators, you
can also combine a width and a height to always make sure that your website looks as good as possible on
different devices and doesn't occupy too much space for images for example, like it would be the case
for us right here.
And with that, we're actually almost done with this module,
the only thing we should do in the next lecture is we should take a look at all the pages on our website
and see if we have to add some more responsive code to it.