landing page with responsive css

Community feedback

• 

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  Hello Dion - nice work on the challenge, it looks pretty close to the proposed design. As for your question to get the colors on the background you can use a linear gradient to divide it up and choose whatever colors you want. For the desktop size background I used:

  background: linear-gradient( to top, $color-beige 0%, $color-beige 30%, $color-white 30%, $color-white 100% ); background-size: 100vh; overflow: hidden;

  The nice part about doing it this way is you can change the percentages in your media queries because the beige colored size had to be adjusted for the tablet and mobile view to match the design. You can check out my solution for this if you have any issues. Hope this helps.

  1

  ---

  

  Dion•80

  @Dion-RPosted over 2 years ago

  @PeshwariNaan this answers my question perfectly, thank you very much. I'm currently working on another project and was wondering if there is a more efficient way to change the font sizing for tablet and mobile layouts without creating a new font variable entirely. :)

  0

  

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  @Dion-R There is no easier way to change the font sizes other than creating another variable.

  0

  

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  @Dion-R There is no easier way to change the font sizes other than creating another variable.

  1

  

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  @Dion-R I don’t know if it is what you search but I try to find a solution for dynamic adaptation of font size without new font-size in media q. You can use calc() to adapt a font-size without changing it in media queries. It may be difficult to chose the right calculation for the ratio. For example we know that what change from screen to screen is its viewport width so you can use vw as the dynamic number and keep a base number. Ex: font-size: calc(1.2rem / 5vw) - if applief to the base font-size in your global css part (:root or html) it scales every other fonts where you use rem. This operation is purely abstract and may be wrong, we need to find the good one and also right units for your project. Each time you change your screen you will have less vw so it may change the fixed number proportionally. I hope it is clear, ask me any questions if needed.

  1

  

  J.D. Browne•870

  @PeshwariNaanPosted over 2 years ago

  @Dion-R That is true - you could have something like font-size: calc(4vw + 4vh + 2vmin);

  You would have to tweek it until you had the right size for whatever screen size you were aiming for. Personally a couple of variables are pretty easy to implement. Keep things simple when you can.

  Marked as helpful

  1
• 

  Amaury Franssen•180

  @ExploryKodPosted over 2 years ago

  Hi Dion,

  I like what you have done with this project : responsive is working and you solve the footer problem we see in the screen shot.

  To improve even more I suggest :

  • Footer, container div: Make a flex-direction of column once you reach mobile breakpoints because the footer items keep their flex-row position and they don't have enough place.
  • Paragraph color can be change to the grey the design show (but you may have a different opinion as black may be better for contrast/accessibility (?)).

  For the <a> I don't know if it is a good practice or not to change the height/width but I think the problem would be : from my point of view changing a default display from inline to block need to be the last resort, so in this case I would use padding and have the same dimension than in design through it, I made it numerous time and you can check it in dev tools.

  For the background I don't see where is the problem but I have this useful trick to color a background in two color or more, you can use linear-gradient creating clear stops with % as it is explained by MDN (see the link below) - so it is no longer a gradient but can create "sharp" bi-color backgound: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color_stops

  1

  ---

  

  Dion•80

  @Dion-RPosted over 2 years ago

  @ExploryKod thank you for the feedback. It felt a bit iffy changing it to a block element so I'll stay away from that. Ive just changed the code on the background based on your advice :)

  1