Skip to content
OverviewSolutions
10
Comments
3
Muhammad Bilal
@mbilal-x

All comments

  • Dean Russell Rivers•40
    @deanriversSubmitted about 2 years ago
    1. Getting it responsive nicely.
    2. The media query. Maybe there is a better way.
    3. Would like some tips on setting up classes to keep css industry standard for something like this.

    product-preview-card-component-main

    1
    Muhammad Bilal•160
    @mbilal-xPosted about 2 years ago

    Hi Dean!

    Congratulations on completing you first challenege here.

    here is some feedback and answer to you question:

    • media queries are the most fundamental way to make you code responsive, getting a hang of it is always good before moving on to using CSS frameworks like bootstrap and tailwind.

    • A well know and accepted method for naming your CSS classes is the BEM naming system. you can look that up.

    • and yes I see you have added your styles in the same html file. Try using a separate styles.css file and link it to you html. This is more useful and scalable approach .

    Hope this helps, goodluck

    Marked as helpful
    1
  • Muhammad Bilal•160
    @mbilal-xPosted about 2 years ago

    Hi Gustavo!

    I have seen your design... your design breaks between 375px and 800px. To fix this you can change you @media (max-width: 375px) to @media(max-width: 800px). Then inside this same media query add to .content{ max-width: 375px; }

    -> Congratulations!! on your first challenge here. Goodluck on your frontend journey.

    1
  • Muhammad Bilal•160
    @mbilal-xPosted over 2 years ago

    Hi Simen! I see you have used flex on the main tag. I what I did was to put flex on the body and then I used a div.panelContainer inside the body. so the div is now centered and I then put my image and text inside the .panelContainer [which also is a flexbox]

    Marked as helpful
    0