Frontend Mentor | Responsive Landing Web Page with HTML + CSS coding challenge solution

Solution retrospective

Hey yoh 🙂, I'm new to web designing & still getting used to it. I've created my first NEWBIE-Free challenge, the Huddle Landing Page with 90% accuracy ( I think ) but I was unable to set the background image ( desktop & mobile svg_s ) sizes that fit into the given parameters. Anyhow If I change width, height, or both properties according to my screen view - the background svg_s either span out or stretched. later I tried some CSS solutions but nothing comes out helpful. All I want to know how to set the background svg_s as the same as in the website pre-preview images that were given.

~Thanks~

Community feedback

Adler G Luders• 1,580

@adluders

Posted about 3 years ago

The site preview does not work 😅

Lakshan• 305

@M-lakshan

Posted about 3 years ago

@adluders yh, something went wrong with Github-page hosting. I'm not sure I submitted it correctly #checking...

Adler G Luders• 1,580

@adluders

Posted about 3 years ago

@M-lakshan 😎😎👌🏾 yeah GitHub pages can be finicky sometimes

Lakshan• 305

@M-lakshan

Posted about 3 years ago

@adluders my index.html, SCSS, CSS and image files ... all in their dedicated positions. I double-checked every path and re-uploaded them. everything works well with my code editor but only the HTML is popping up in the hosting. I don't know why! 😕

Code-decode• 145

@sayedlee

Posted about 3 years ago

you should re-check your css link path..as i can see vercel only finding your html file.

Adler G Luders• 1,580

@adluders

Posted about 3 years ago

@M-lakshan I think what's listed above is what you should do. It might just be how the folder structure is.

Albertoflj• 170

@Albertoflj

Posted about 3 years ago

@M-lakshan I had the same problem, try putting "./path" instead of "/path", it worked for me.

Lakshan• 305

@M-lakshan

Posted about 3 years ago

@sayedlee , @Albertoflj , @adluders , : Thankyou very much guys 💪🏼🙂🥂. somehow I managed to host the site correctly. It can be seen in preview-site but still hv a tiny problem. How can I make it appear in the DESIGN COMPARISON as my solution?

Adler G Luders• 1,580

@adluders

Posted about 3 years ago

@M-lakshan ayyyyyyye that's great. I think if you hit generate screenshot, it should update

Lakshan• 305

@M-lakshan

Posted about 3 years ago

@adluders Oh hoooo that worked. Thanks again! 🙂🥂

Adler G Luders• 1,580

@adluders

Posted about 3 years ago

@M-lakshan ayyye. I'm glad