Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing Page Using CSS Flexbox

DayaA 100

@Aishaakin

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. I don't know how to use the mobile and desktop viewport.
  2. I can't make the sentences size fit right like the original template.

Community feedback

Jhonatan 90

@JhonyDomingos

Posted

Hey congratulations for your solution.. Hey I have some tips if you wanna test for your solution

  1. Adding to the body min-height 100vh the elements should occupy the web browser viewport height.

  2. .container you add text-aling:center; set the width with a value in rem not in %, I think 18.5rem will awsome, you can declare margin 30px to the top and auto ex:. margin:30px(top) auto;

  3. h1 do not need a width and you can declare the padding like this padding:(top)20px (right)30px (left)30px 0(bottom); and check this padding I think it's a little too much, I think the padding 15px its enough

  4. p tag I think you can remove the paddings because already and put in the container it will be aplied to h1 and p tags

  5. on .img do not need the height:100% and you can add max-width:100% and set the width:100% and check the paddings maybe you won't need them

  6. You can change all the sizes px to rem to resize better when the screen gets smaller

I think that's all!!! there are a few tips that can improve on your solution!! I'm here to help anything, I'm gald in help ya !!! if it was useful for ya I'll be glad

Marked as helpful

1

DayaA 100

@Aishaakin

Posted

@JhonyDomingos Oh Thank you i will try your help tip. Thanks again.

0
mahmmoud 180

@mahmmoud5

Posted

if you want to use the mobile and desktop viewport you can use " @media not|only mediatype and (expressions) { CSS-Code; } " or you can search on google about responsive websites and then you will find the answer for you'r question.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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