Submitted about 3 years ago

Hundle landing page w/ curved section

Vinicius Scarabelli• 130

@S0NES

Preview site View code

This is a solution for...

Huddle landing page with curved sections

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

So i have this challenge for myself to do 1 project every day and unfortunately i couldn't make the footer part to work in responsive the way it should. if anybody can help me solve that i would love to give it a try.

Community feedback

Rishabh Pagaria• 30

@Rishabh-Pagaria

Posted about 3 years ago

I loved your website, but I would like to suggest you some points if you don't min for both desktop and mobile view:

In desktop view you should make your different-different components like hero page, form-page, user-page to width 100% so it would be become responsive and dosen't bother you much in small screen.
In mobile view your content is not responsive after 828px of screen size, maybe you can try resizing the image sizes.

Rest is good

Thank You

Happy Coding

Vinicius Scarabelli• 130

@S0NES

Posted about 3 years ago

I will try to fix but I'm not quite sure how to fix the problem in responsive in 828px, but worth give it a try. thank you for reviewing my page.

Rishabh Pagaria• 30

@Rishabh-Pagaria

Posted about 3 years ago

@S0NES Hey what you can do is whatever components you have made, set there width to 100%

for e.g.

<article class="panel" id="grow">
        <div>
          <h1>Grow Together</h1>
          <p>
            Generate meaningful discussions with your audience and build a
            strong, loyal community. Think of the insightful conversations you
            miss out on with a feedback form.
          </p>
        </div>
        <img src="images/illustration-grow-together.svg" alt="grow together" />
      </article>

So for the above

CSS .pannel{ width :100%; }

and also make your image width 100% it will help you in website responsiveness.

Marko Nikolajević• 1,065

@MarkoNikolajevic

Posted about 3 years ago

Hi @S0NES you did a good work on this project! Looking at your code I've a few suggestions for you

you could change the h1 inside your divs with class="panel" to a h2 tag because they have different font sizes and to be more consistent about the design
you could use the main tag instead of section tag and add a footer tag to wrap all elements which goes inside it

What would you do about the footer on mobile?

Vinicius Scarabelli• 130

@S0NES

Posted about 3 years ago

hey @MarkoNikolajevic, in the middle i was not sure if I should have used it h2 or h1. thanks for giving me the right direction, I will review my knolodge about semantic tags in html, maybe I'm getting confused about which one should i use. in the footer i had a big problem in responsive and didn't know how to fix and since i made the page in 1 day i was getting kinda tired so i aplied a 'display: none;' to it. thank you for reviewing my page.

Marko Nikolajević• 1,065

@MarkoNikolajevic

Posted about 3 years ago

@S0NES about the footer I will suggest you to add display: grid on the footer tag.

for the mobile view you could use grid-template-columns: 1fr to stack every everything on 1 column.
for the desktop view you could use grid-template-columns: repeat(4, 1fr) to have 4 equal width columns

for example you html can look as it

<footer>
  <div>first col content</div>
  <div>second col content</div>
  <div>third col content</div>
  <div>fourth col content</div>
</footer>

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