Looking to hire developers?
@imonaar
@adram3l3ch
Submitted
Hi folks, here is my another solution. I have tried to implement the drag options without using any 3rd party library. It was quite hard though. There is some more functionalities to be implemented in the drag and drop feature. I will work on that in the future. I'll appreciate any feedbacks :)
@imonaar
Posted
Elegant filtering
Marked as helpful
@imonaar
Submitted
Laying the bg images was a little troublesome. Used js to feed the prices.
comments and corrections are welcome.
@imonaar
Posted
Okay. is there a better way to add the background images without using the pseudoelements?
The button border bothered me a bit but it was in the design. i was actually considering doing away with it
@Julie-Gz
Submitted
Hello front-end mentor community. In this challenge I struggled with the following points, any help would be much appreciated:
How to make the browser switch from one svg file to another: In the challenge they gave us two svg files for the background, one is for desktops and the other is for mobile devices. How do I make the browser switch between svg files? Can I put an svg tag inside an img tag? Or is there something that acts like the picture tag but can be used with svg tags? The answers I found on the internet all worked with svg files placed inside img tags in the src, but there was nothing that worked with the svg tag itself.
I tried to center the div in the middle of the page. Below is the code I tried to use: .container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } Technically it should've worked but it pushed the container div way up, so I had to change the top property from 50% to 85% and then it worked, at least for the desktop view. In mobile devices, the container div was pushed to the top right leaving a lot of space on the right and the bottom. Also, if there's anything else I could improve in the code, please let me know. Thank you so much :)
@imonaar
Posted
use css background property on your .hero section https://developer.mozilla.org/en-US/docs/Web/CSS/background , the two images provided are for mobile and desktop. Use a media query to assess the viewport width and change the background . https://css-tricks.com/a-complete-guide-to-css-media-queries/
i.e
dislay: flex; align-items: center; justify-content: center; height: 100vh;
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Center_an_item
