All solutions

I am trying to to estimate the time to complete these Newbie projects. A little over two hours from download to published GitHub repo, Netlifiy live, Frontend Mentor solution.

The card component itself was simple enough. Although, in the design files it occupies more of the view port. I sized the card proportionally to the 18px specified for the name and stats. The two SVG background took some tinkering. They look fairly close.

Another "newbie" HTML/CSS challenge. These are actually relaxing. Although they can be deceptive getting the screenshots pixel perfect.

Hello frontendmentor.io coders,

The provided background .svg for desktop is only 1440px. On xl screens, it obviously does not span the device's screen. There are resources for expanding the SVG view box but that seems beyond the parameters of the style guide. Any opinions on style guide parameters and expectations or solutions for extra large screens?

Thank you

Again I am having a discrepancy when viewing the page with Chrome's device toolbar and manually adjusting the screen width to check for responsiveness.

Things look good when using the device toolbar. It is necessary to scroll the page aon small devices. But when I manually adjust the screen width, the height of the first section does not fill the screen @768px.

If I try to fix this problem with a height: 100vh; it breaks the layout on smaller screens when using the device toolbar.

So, if this makes any sense. I can make the RWD work with the device toolbar OR by manually changing the screen's width with the dev tools. NOT both.

I had to an extra 180px when I deployed the app on Vercel and Netlify. Now it looks completely "wrong" with the extra padding when I open it with live server in Visual Studio Code.

Why is that? The positioning of the primary container is completely different on the local host compared to Vercel or Netlify deployment. And just for fun, I included a Mozilla Firefox browser screenshot @375px to show the difference cross-browser.

Trickier than I thought. The first solution I submitted was not great but a fellow site member helped me. @vcarames -thank you

I was using width instead of max-width, killing my flexbox RWD. It has been a while since I wrote any CSS. Simple but "fatal" error.

I didn't use an alt tag for accessibility. Not good.

Also, they pointed out that my overall proportions were way off the mark. Based on the body font size of 15px and the screenshot of Desktop: 1440px it is roughly max-width:25% ?

This looked really easy but it was challenging and fun.