Skip to content
OverviewSolutions
3
Comments
4
Nigusu Daniel
@KingDan123

All comments

  • Nigusu Daniel•50
    @KingDan123Posted 4 months ago

    its good and fantastic work

    0
  • jubileelin•100
    @jubileelinSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I am confused on how to utilize measurements others than px for things such as font sizes and the widths of containers. I also do not know how to make the font sizes change with the dimensions of the screen as the challenge suggests so if anyone has any resources or advice on how to implement this, it would be very helpful.

    Blog Preview Card Responsive Page

    1
    Nigusu Daniel•50
    @KingDan123Posted 4 months ago

    When it comes to utilizing measurements other than pixels (px) for font sizes and container widths, you have a few options. Here are some commonly used units: Percentage (%): This unit allows you to set sizes relative to the parent element. For example, if you set the font size of a container to 100%, it will take the font size of its parent element. Using percentages can help maintain proportionality across different screen sizes. Viewport Width (vw): This unit represents a percentage of the viewport width. For instance, setting a font size to 5vw means the font size will be 5% of the viewport width. Using vw can be useful for responsive designs as the font size will adjust automatically based on the screen size. Viewport Height (vh): Similar to vw, vh represents a percentage of the viewport height. It allows you to set sizes relative to the height of the viewport. For example, setting a container's height to 50vh means it will take up 50% of the viewport height. Em (em): The em unit is relative to the font size of the nearest parent element with a defined font size. If no parent element has a defined font size, it's relative to the browser's default font size. Using em can help create scalable designs based on the font size hierarchy. To make font sizes change with the dimensions of the screen, you can use CSS media queries. Media queries allow you to apply different styles based on the characteristics of the user's device, such as screen width. By defining different font sizes for different screen sizes, you can achieve responsive typography.

    Here's an example of using a media query to change font sizes:

    css Copy .container { font-size: 16px; }

    @media screen and (max-width: 768px) { .container { font-size: 12px; } } In this example, the font size of the .container class is set to 16 pixels by default. However, when the screen width is 768 pixels or less, the font size is changed to 12 pixels. Remember that implementing responsive design requires testing on various devices and screen sizes to ensure your website or application looks and functions well across different platforms.

    Marked as helpful
    1
  • Nigusu Daniel•50
    @KingDan123Posted 4 months ago

    yes also use indentation. that's it.

    0
  • Nigusu Daniel•50
    @KingDan123Posted 4 months ago

    its good but make it well structured and readable

    0