@prjwl16
Submitted
I am struggling with media queries and when working with images. Dont, understand how to align them properly.
@Bl4ngk
@prjwl16
Submitted
I am struggling with media queries and when working with images. Dont, understand how to align them properly.
@Bl4ngk
Posted
You need to use a <picture></picture>
tag to display different image based on your screen width
For the media query you don't need to set max-height:667px
. You also need to provide padding to the body if you see the mobile design there is padding on the top and side
Marked as helpful
@wea2ne
Submitted
I've been struggling with the responsive a little even if I feel like it's quite simple to solve, I cannot manage to have the correct design on the desktop view and on the mobile view...
@Bl4ngk
Posted
You don't need to use display: flex
and all of it's properties on body for the Mobile layout as articles are Block element they will automatically start on new line
You will also need to refactor your HTML.One easy trick that will help with that is to start with the desktop design and see how many distinct blocks of content you have and put them in rectangle don't go super detail you just need a broad view.I see two rectangles one for the image and one for all the text content.Try rapping the image in one block level element and all the text content in one block level element this will make styling things easier
Remove the <span class="parted"></span>
from your H1 tag
You can use a <picture></picture>
tag to display different image based on your screen width
Marked as helpful