Skip to content
Submitted over 2 years ago

Stats Preview Card Component - Responsive

George Stawowczykā€¢210
@Jorgus1710
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Another good challenge. This one made me think about how to re-arrange the layout according to mobile and desktop views. Good planning and a simple understanding of HTML structuring helped me with this. There was A LOT of tinkering around with margins and paddings throughout this project, and it got somewhat messy since somewhere down the line I couldn't exactly control some of the margins and paddings in different views, however I'm confident it has to do with hierarchy in CSS. At the very least I didn't succumb to the "!important" fucntion, so I'm pleased with that.

Question(s);

When linking images I always tend to place them inline in the HTML file. However on tutorials I see many people simply reference them in their style sheets. In this challenge it calls for two sizes of the same image - one for mobile and one for desktop that will change dynamically.

I got away only using the one image (mobile) for both views. This is in large part due to me not realizing I had two images to work with, but non the less I'm not entirely sure how I would go about using both images in different views. My initial instinct would suggest that I could "hide" the mobile image when in desktop view and vice versa, but I'm not sure. Please let me know what would be the best approach for referencing multiple images as well how to go about using those different images as views change.

Community feedback

  • IRVINE MESAā€¢1,855
    @DrMESAZIMPosted over 2 years ago

    Hi George

    I read through your question for the community in particular I will help your on this topic you referred with your own words

    "but non the less I'm not entirely sure how I would go about using both images in different views. "

    Take note by default all styling you do is for mobile view unless your specify preferable using media queries

    In the challenge it meant this

    "image-header-desktop.jpg" is reserved for large screen

    "image-header-mobile.jpg" is reserved for small screen

    therefore if you apply you code like this meaning large screen start from 600px it would be correct

    <head>

    .image-overlay{ background :url(image-header-mobile.jpg)

    @media only screen and (min-width: 600px){

    .image-overlay{ background :url(image-header-desktop.jpg)

    }

    </head> <body> <div class="image-overlay"></div> </body>

    Secondly I noticed your solution is fixed to mobile view even for large screen . T o address that lets add the following code inside the file style.css line 141

    .card{

        display: flex ;

    flex-direction: row-reverse;

    width: 200%;

}

.footer-info{

    display: flex;

    flex-direction: row;


}

.companies, .templates, .queries{margin: 3rem;}
    Marked as helpful
    1
  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted over 2 years ago

    Greetings, George! šŸ‘‹

    Good effort on this challenge! šŸ‘ It's always a good practice to avoid !important most of the time. šŸ˜‰

    Regarding your question about the image, when I did the challenge I used picture element so that I could control what image should appear on different screen sizes. So, I suggest using picture element. Using CSS which I guess they are using background-image makes them work twice harder because they have to give a specific height for the placeholder and then use a couple of background properties to show the image and then use a media query to change the image. In my opinion, it is a lot of work. šŸ™‚

    Some feedback from me.

    • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
    • It looks like you try to make the card in the middle of the page by using padding. I highly recommend just using flexbox to do it and adding a little bit of padding on the body element to prevent the card from touching the browser edges on small screen size. This way, you don't have to keep adjusting the padding for different screen sizes.

    That's it! Hope you find this useful! šŸ˜

    Marked as helpful
    1
  • Shashree Samuelā€¢9,260
    @shashreesamuelPosted over 2 years ago

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think that the opacity on the image needs to be a bit darker. Secondly the description is supposed to wrap after the word "make".

    I hope this helps

    Cheers

    Happy coding šŸ‘

    0
    George Stawowczykā€¢210
    @Jorgus1710Posted over 2 years ago

    @TheCoderGuru thanks for the advice!

    Thats actually one of the things I had an issue with - wrapping the text after a certain word to match the design. So far I've been using margins and padding on the sides in hopes that it will wrap appropriately. Another solution to this would be excellent!

    0

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