Skip to content
Submitted 3 months ago

Pure CSS Flex-box

SemptechVzla•150
@SemptechVzla
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

i am learning yet, no proud about anything. Nex time, i will add variables in mine css to practice them

What challenges did you encounter, and how did you overcome them?

the challenge was to place an image in the button, i did overcome it by watching videos from youtube about how to do it!.

What specific areas of your project would you like help with?

i want to learn how to use varibles at css

Community feedback

  • Pedro Eustáquio•210
    @PedroEustaqPosted 3 months ago

    Hello! You want to know how to change variables in CSS trought JS? if it is, just:

    var page = document.querySelector('.Container');
page.style.width = '200px';
page.style.backgroundColor = 'green';

    and keep going...

    or if it is, example, 100px...100vh / 100vw.... 100% | I recommend you watch some youtube videos about it, but yet i haven't found one to show you :(

    Basically:

    1. px = is for amount of pixels

    2. % = is relatable as the size of the page (if you make a container with height: 90% it cover 90% relatable to your page, ex: your page is heigth 3000px then the height of the container will be 90% of 3000px.)

    3. vh = is only for height, and its the same thing as % but it will depend on your screen (if you put height: 80vh, it will cover 80% of the screen the user is on.)

    4. vw = is only for width and its the same but with width.

    5. Try making and HTML5 changing de body with these ones, so you can see the diference!

    1

Please log in to post a comment

Log in with GitHub

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