@PeshwariNaan
Posted
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.
@Dion-R
Posted
@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. :)
@PeshwariNaan
Posted
@Dion-R There is no easier way to change the font sizes other than creating another variable.
@PeshwariNaan
Posted
@Dion-R There is no easier way to change the font sizes other than creating another variable.
@ExploryKod
Posted
@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.
@PeshwariNaan
Posted
@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
