Hundle landing page w/ curved section

Community feedback

• 

  Rishabh Pagaria•30

  @Rishabh-PagariaPosted over 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:

  1. 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.
  2. 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

  0

  ---

  

  Vinicius Scarabelli•130

  @S0NESPosted over 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.

  0

  

  Rishabh Pagaria•30

  @Rishabh-PagariaPosted over 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.

  0
• 

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 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?

  0

  ---

  

  Vinicius Scarabelli•130

  @S0NESPosted over 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.

  0

  

  P

  Marko Nikolajević•1,065

  @MarkoNikolajevicPosted over 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>
  

  1