@Alex-Archer-I
Posted
Hi there!
I see you are using absolute positioning here. It's good for practice but not quite fit for this challenge =)
Also there not need to wrap every item in the container as h1
, p
and img
is block elements so you can style them directly.
Basically in this case you need flex with two parts. For example it can be main
tag or .container
- but don't forget that every page should contain main
tag for semantical reasons.
<main>
<img src="" alt=""/>
<div className="content">
<p>PERFUME</p>
<h1>Title</h1>
<p>Description</p>
...
</div>
</main>
Sorry, I didn't rewrite everything, but I hope you understand in general =)
So, you set display of main
to flex, img
and .content
will take a half of it's width and than you can style .content
as qr-code card in the previous challenge.
Well, that's a main idea =)
Marked as helpful
@Macnelson9
Posted
@Alex-Archer-I Oh okay. I'll work on it using your method and give you a feedback on how it's going. Thank you so much.
@Alex-Archer-I
Posted
@Macnelson9
There are often a few ways to achieve required result. Flex is just the easier one, and absolute positioning could be very unpredictable in various screen sizes =)
Alas, I didn't do this challenge, so I can't see the design template for mobile devises. But I see, that there is another picture for mobile screens and I can assume that it is located above the content. In that case you can change flex-direction
on column
in the media
queries.
You can change img
source depending on the screen size via picture
tag which contains img
and source
tags:
<picture>
<source srcset="mobile.jpg" media="(max-width: 400px)">
<img src="desktop.jpg" alt="">
</picture>
This element will check conditions of every source
tag (they are similar to media
in css) and load image from it's srcset
. If none of the conditions match it'll load image from the src
of img
tag.
Or, you can have two img
tags and change their display
via media
, but semantically picture
tag will be better and a bit more professional =)
Marked as helpful
@Macnelson9
Posted
@Alex-Archer-I Hey, thanks so much! I figured it out. Check out the new solution I submitted.