Skip to content
Submitted about 2 years ago

Responsive site built with FlexBox

Attrams•130
@Attrams
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey guys, this is my solution for this challenge. I had trouble positioning the icons in the cards and after googling I found a solution but I don't understand why the icons move outside the card when I comment out position: relative in .card. Full code can be found below. Thank You.

 .card {
  width: 100%;
  height: var(--mobile-card-height);
  background-color: white;
  margin-bottom: var(--card-margin-bottom);
  border-radius: 0.5rem;
  padding: 1.4rem;
  position: relative;
  box-shadow: 0px 0.875rem 1.25rem -0.313rem rgba(218, 228, 240, 1);
}

 .card img {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: inherit;
}

Community feedback

  • Kristina Radosavljevic•380
    @KristinaRadosavljevicPosted about 2 years ago

    Hi Attrams! Good job on your solution :)

    As for your question, when you specify position: absolute;, the element is positioned in relation to the nearest parent which is also positioned (i.e. which has the position property set to anything other than static, which is the default). However, if you don't have such an element (which happens when you comment out position: relative; from .card), then the first parent in the hierarchy (which is <html> I believe) is used as a reference for positioning the icons. You can read up on this all over the internet if you just google 'css position absolute', but I also found this article, which goes into a lot of detail from the beginning so it might be good as a starting point if you want to learn more :)

    Also, while we're at it, I noticed that the titles and the introductory paragraph are a bit too narrow from screen widths of about 1310px to about 900px, so you might wanna take another look at that.

    I hope this helps :)

    Marked as helpful
    0
    Attrams•130
    @AttramsPosted about 2 years ago

    @KristinaRadosavljevic Thanks for the response

    0
    Attrams•130
    @AttramsPosted about 2 years ago

    @KristinaRadosavljevic I just found out there's a Ideas to test yourself section and I wanted to try out Sass or less but I'm having difficult setting either of them up. Do you by any means use them in your project? If Yes, can you help me with the setup. Thank You.

    0
    Renan Tiscoski•1,240
    @DonUggioniPosted about 2 years ago

    @Attrams Hey there,

    First step is make sure you have node installed globaly, after that, open the terminal on vs code and type npm init. It will create a json file with the dependecies. Then run npm install sass.

    You can also install an extension in VS code called "Live Sass Compiler". It makes life a lot easier since you don't have to do any manual set up. After you install that extension a button will show up at the bottom right that says "Watch Sass", click on it and it will start compiling your code to css.

    Then make sure you add the correct css file to your html and you should be good to go.

    Marked as helpful
    1
    Attrams•130
    @AttramsPosted about 2 years ago

    @DonUggioni Thanks for the response

    0
    Attrams•130
    @AttramsPosted about 2 years ago

    @KristinaRadosavljevic Thanks also for the article, It was really helpful.

    1
    Kristina Radosavljevic•380
    @KristinaRadosavljevicPosted about 2 years ago

    @Attrams No problem! :) And yes, I use Sass in my projects, and there are a couple of ways to set it up. I personally do it through the node-sass module and I use this article as a checklist for how to set it up (with an additional step of creating the .gitignore file and putting the node_modules/ folder in it, which gets created when you run the npm install node-sass command, but your version control system doesn't really need to track it).

    But, as @DonUggioni has mentioned, you can also set it up as a VS Code extension - I haven't tried it, but it sounds pretty easy and straightforward :)

    Good luck! :)

    Marked as helpful
    0
    Attrams•130
    @AttramsPosted about 2 years ago

    @KristinaRadosavljevic Thanks again! 😇

    1

Please log in to post a comment

Log in with GitHub

Join 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