Responsive Landing Page using CSS Grid revised

Community feedback

• 

  Manish Patel•730

  @savvystriderPosted over 1 year ago

  Hi, I'm glad you didn't give up! I think it came out well.

  If you want to apply specific styles when the screen is below a certain size, you'll need to use Media Queries. The syntax takes some getting used to, but it would go something like this:

  @media (max-width: 375px) { /* … */ }

  Quick notes:

  • remove max-width: 85rem; from the body element. It will center the content a little more smoothly.
  • there's a small typo in your footer styles that's causing some weird formatting: width: 100dvh;

  0

  ---

  

  Reni•40

  @renikoulenPosted over 1 year ago

  @savvystrider Hi Manish. Thanks a Lot. I will Work with your suggestions. dvh ist Not a Typo. From what I understand fromm some CSS Tutorial IT Stands for dynamic viewport height and ist supposed to Help with responsiveness even without the need of mediaquery. Sorry If I used a confusing Mix of concepts. Cheers, Reni

  0
• 

  Reni•40

  @renikoulenPosted over 1 year ago

  Hi @savvystrider. I am still working in a solution based in your Feedback. I think I am getting there. Thanks a lot for these helpful hints.

  0
• 

  Manish Patel•730

  @savvystriderPosted over 1 year ago

  Looks good! Try to get the content horizontally and vertically centered on the page. You can use grid or flexbox to achieve this.

  0

  ---

  

  Reni•40

  @renikoulenPosted over 1 year ago

  @savvystrider Thanks a lot for your Feedback. May I pick your brain on this as I failed so terribly? I tried to do justify-content and align-items to Center horizontally and vertically. But somehow it did show as intended. Thanks again. Reni

  0

  

  Manish Patel•730

  @savvystriderPosted over 1 year ago

  @renikoulen Sure, did you have a question for me?

  0

  

  Reni•40

  @renikoulenPosted over 1 year ago

  @savvystrider I will send it via DM. Thanks a lot in advance. Cheers, Reni

  0

  

  Reni•40

  @renikoulenPosted over 1 year ago

  @savvystrider Hi Manish. I nearly gave up on this project. Now, I reworked it entirely and did some more reading on flexbox. It helped a lot. The only thing I still struggle to get straightened out is how to remove the border-radius to reflect responsiveness in a way I would like to see it. So the question I have is: How can I remove the border-radius only if the screen size is below 375px? Thank you so much for your help. Cheers, Reni

  0