Skip to content
Submitted over 1 year ago

Responsive landing page using Html and vanila css only,

SURU EMMANUEL•390
@suruaino
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I make images to be perfectly scalable within different screen sizes? I mean, what are the available better options for doing it?

Most of the times I struggle with trying to fix this same problem where you see image getting smaller while the text-containing container beside it is getting bigger and vise-vasa as the screen size changes.

Community feedback

  • Aimal Khan•2,260
    @Aimal-125Posted over 1 year ago

    Bro you can use:-

    max-width: 100%;
display: block;

    if its not working then:-

    width: 100%;
height: 100%;
display: block;

    And you can also use media queries to responsify images depending on screen size. :)

    Marked as helpful
    0
  • Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    Hi! Well done on completing the challenge!🙌🏻

    To answer your question, instead of applying specific width to your image you can apply max-width: 100% to your img and it will scale accordingly to the device.

    You can do it like this:

    img {
max-width: 100%;
}

    With this you can remove all the specific widths you have applied to your img uptil now.

    • 🎯 Here you can read more about it and how to make images responsive using css.

    I hope this cleared your doubts!

    Happy coding!🕺🏻

    Marked as helpful
    0

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