Skip to content
OverviewSolutions
18
Comments
4
kevin
@imonaar

All comments

  • Adarsh•1,640
    @adram3l3chSubmitted almost 3 years ago

    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 :)

    To do app made using React and Sass

    2
    kevin•415
    @imonaarPosted almost 3 years ago

    Elegant filtering

    Marked as helpful
    1
  • kevin•415
    @imonaarPosted about 3 years ago

    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

    0
  • kevin•415
    @imonaarSubmitted over 3 years ago

    Second Project. social-media-dashboard-with-theme-switcher. Feedback & corrections will be appreciated.

    sass. parcel, netlify

    2
    kevin•415
    @imonaarPosted over 3 years ago

    I will check it out. Thank you!

    0
  • Julie_Gz•450
    @Julie-GzSubmitted over 3 years ago

    Hello front-end mentor community. In this challenge I struggled with the following points, any help would be much appreciated:

    1. 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.

    2. 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 :)

    css properties and flexbox

    2
    kevin•415
    @imonaarPosted over 3 years ago

    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/

    1. use flexbox to center the contents of the body;

    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

    0