Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Page Main using HTML, CSS

Miguel 330

@Mad-input

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Bulid with HTML and CSS

Community feedback

BT738844 600

@BT453567

Posted

Hello Miguel

Your screenshot does not seem to match the preview site? Does the link need to be updated?

Regards

0

Miguel 330

@Mad-input

Posted

@BT453567 Hello, thanks for your comment. I don't understand what you mean, the site view doesn't match the design?

0
BT738844 600

@BT453567

Posted

Hi Miguel @Mad-input, when I click on the "preview site" button from my desktop the webpage does not appear formatted correctly, however it appears fine when the "preview site" button is clicked from my phone.

I have looked at your code and believe that the nested statements you have made are not valid CSS code, for example:

.header__recipe { .image__header { margin-bottom: 1.875rem; img { width: 100%; object-fit: cover; border-radius: var(--radius); } }

This should be written as:

.header__recipe .image__header img { width: 100%; object-fit: cover; border-radius: var(--radius); }

0
Miguel 330

@Mad-input

Posted

@BT453567 https://holamundo.io/2023/08/18/como-se-usa-el-anidado-en-css-nativo-css-nesting/

I think your browser does not yet support CSS nesting.

0
BT738844 600

@BT453567

Posted

Hello, Yes my browser must not be compatible, I did not realise that nested CSS had been introduced @Mad-input

0

Please log in to post a comment

Log in with GitHub
Discord logo

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