The switching between the different viewports while maintaining the structure of the design was a bit tricky for me, but I managed to solve that issue even though I don't think the method I used was the best practice.
Hey saw your solution, looks great.
One suggestion, instead of <img> tag, try <picture> tag, this will load only one of the two images(depending on if it is a mobile or desktop).
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.
Hope this helps.
How do I learn how to make my sites responsive using media query
Hi, I'll try to get you started in a simple way. open your css file and add this body { background: white; } @media screen and (min-width: 768px) { body { background: red; } }
resize your browser to <= 768px to see the body go to white and >= 768px to see it become red.
also remember this. min-width means if the screen is atleast(>=) that width, apply the css inside. max-width means if the screen is atmost(<=) that width, apply the css inside
and place your media queries in the end.
This should get you started. .
Hi! This is my solution <3
Looks great, responsive!.
You can add this to make it even better,
Right now it loads both the mobile image and the desktop image all the time. <picture> tag will just load one of them depending on the context.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Hope this helped
The challenging part was trying to make the image responsive.
Looks good, this is an interesting approach setting the image as background with css. have a look at the <picture> tag, you can do responsive images with just html.
Some problems still occur but for now im done. I'll be pleased if someone point out better solutions. :)
Two things, one of them I just learned yesterday, thanks to a comment.
Hope this helped.
PS: The output looks good.
