Submitted over 3 years ago

Single price challenge

Maria Urdapilleta• 55

@mariaUrda

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone! Here's my very first challenge Feedback will be appreciated :)

Community feedback

seyide hundeyin• 440

@SeyideHundeyin

Posted over 3 years ago

Hi,

You did a great job on this challenge and you can work on the media queries to make it more responsive on mobile.

Maria Urdapilleta• 55

@mariaUrda

Posted over 3 years ago

@SeyideHundeyin HI! Thanx ♥ I'm struggling a bit with media queries, can't fully understand how it works yet. If you have some advice on documentation I can read about it, i'd appreciate !

seyide hundeyin• 440

@SeyideHundeyin

Posted over 3 years ago

@mariaUrda oh for sure. you can check freecodecamp.org, youtube videos, or check here https://www.w3schools.com/css/css_rwd_mediaqueries.asp to learn more about it.

I hope that helps.

Kyrylo Lvov• 160

@kyrylolvov

Posted over 3 years ago

Hey 😀

Great job on this challenge! 🏆

The only thing I might recommend is taking a look at media queries, as you have some issues with responsiveness on some of the resolution. I believe, the problem is caused by padding right in the first row. Also, you might want to consider using a short version for padding, when you just write "padding: 0 0 0 0" which indicated padding from top, right, down, left respectively! 🙂

Maria Urdapilleta• 55

@mariaUrda

Posted over 3 years ago

@kyrylolvov thanx a lot! Yes, i had huge problems with media query and haven't quite catch the trick yet. Still can't make it fit the mobile width requested without using padding right. Somehow if I remove that padding, the whole text goes to hell haha But I'll keep tryng :)

As for the short version of padding, just tried it and works perfectly, thanx for the trick.

Please log in to post a comment

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