Design comparison
Solution retrospective
If anyone could help me with the background images.
It seems that they are somewhat responsive unless I am missing something. I tried researching on how to get the background images in place for both the mobile and desktop with no success. If anybody has any tips on the css/html for that it would be greatly appreciated.
I used custom CSS properties throughout and instead of any semantic HTML, I just went ahead and used DIVS. I thought about using utility classes, but just thought the page was extremely simple to begin with.
Any other comments would be greatly appreciated!
Thank in advance!
Community feedback
- @itushPosted over 1 year ago
Congratulations on completing the challenge! π
It is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:
-
By default, all HTML elements are static (non-positioned elements).
-
By using top, right, bottom, left we can control the final location of an HTML element.
-
Top, right, bottom, left, z-index donβt have any effect on Statically positioned / non-positioned elements.
-
So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.
You may checkout 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first Workflow etc. in a simple way.
I hope this helps.
Keep at it...π» Happy hacking!
Marked as helpful0@newtothis90Posted over 1 year ago@itush
Great info! I'll definitely check out your discussion on those topics!
1 -
- @hitmorecodePosted over 1 year ago
It looks good, well done. For the background just add both images and then use
position: absolute
orposition: relative
and place them in position for mobile and for desktop. See if you can manage to do it, other wise let me knowMarked as helpful0@newtothis90Posted over 1 year ago@hitmorecode
Ahhh. So it's not "exactly responsive", but uses media queries to place them in one position for mobile and another position for desktop.
I was trying to have them dynamically shift position as the screen size grew/shrank.
Thanks so much.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord