Frontend Mentor | Muhammad Bilal's profile

All comments

Dean Russell Rivers•40

@deanriversSubmitted over 2 years ago

Getting it responsive nicely.
The media query. Maybe there is a better way.
Would like some tips on setting up classes to keep css industry standard for something like this.

product-preview-card-component-main

Muhammad Bilal•160

@mbilal-xPosted over 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

Gustavo de Camargo Campos•200

@themegazordSubmitted over 2 years ago

Product preview card component

Muhammad Bilal•160

@mbilal-xPosted over 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; }

For your future designs look into mobile first designing mobile first code

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

Simen Hagen•90

@SimenHagen86Submitted over 2 years ago

All feedback would be appreciated, struggled alot with the desktop view, also what parent etc to put flex on.

so any tips on layout is welcome

Product preview card component try with flex

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