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

Responsive page using flexbox

Zilvinas• 20

@Zilvis0

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Reuben👾• 560

@Rubylenshy

Posted

Hi @Zilvis0 👋. You might wanna go over the deployment of your page,

  • <link rel="stylesheet" href="./index.scss"> should be a <link rel="stylesheet" href="index.scss"> as the former format will try to get out of the current directory and wouldn't find the scss file.
  • <div class="product-wrapper"> should be wrapped in a <main></main> tag or rather rename that to a main

I hope this helps

Keep Coding @Zilvis0

Marked as helpful

1

Vanza Setia• 27,795

@vanzasetia

Posted

@Rubylenshy

The href="./index.scss" and href="index.scss" are the same file path. The ../ file path is the one that will make it outside of the current directory.

@Zilvis0, the problem here is you need to compile the Sass code to the CSS code. Then, link the HTML to the CSS file.

Browsers don't understand Sass. So, you need to compile the Sass code to CSS code. Also Zilvinas, there is no need for 10 preconnect links. Just have one for each preconnect.

Sass should be a devDependencies. It is not used on the website.

Lastly, the node_modules folder should not be uploaded to the GitHub repository. I recommend creating a file called .gitignore and then adding node_modules to it. (Actually, if you are using the starter files from Frontend Mentor, this should be prevented by default).

Marked as helpful

2
Zilvinas• 20

@Zilvis0

Posted

@vanzasetia This was a very helpful insight on my problem. I looked into it and managed to fix it thanks to your input. I was not aware that scss would not load on github's provided server. Replaced the .scss with.css and it loaded up nicely.

1
Zilvinas• 20

@Zilvis0

Posted

Thank you for the feedback! I am having the style issue if I'm trying to work with live server. If I'm purely opening the index.html the style is there as it should be. Anyway, I will look into this and try to fix the issue.

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