Skip to content
Submitted almost 2 years ago

Responsive home-page using HTML, CSS, Javascript

Andrés Forero•150
@AndresFelipeForero
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I found difficult when about the version movile I was try to resize the logo, because it is a "svg" file, then I tried by "scale" but, after there was a problem when I tried to align the margin left within of "nav".

Community feedback

  • Dusan Brankov•860
    @dusan-bPosted almost 2 years ago

    Hi,

    to answer your question, you can easily change the size of inline SVG images by replacing width and height with the viewBox attribute.

    Here's an example with a width of 200px:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 40" class="nav__logo--desk">
  ...
</svg>

    .nav__logo--desk {
  width: 200px;
  height: auto;
}

    Just make sure that the last two values of viewBox are the original width and height of the SVG image.

    Regarding the advice of @AdrianoEscarabote, it's the right way to build semantic HTML, but the primary navigation <nav> always belongs inside the page <header>.

    Hope this helps. Keep it up, and happy coding!

    Marked as helpful
    0
    Andrés Forero•150
    @AndresFelipeForeroPosted almost 2 years ago

    @dusan-b Hi,

    Thank you for your help. Pitifully, when I read about the "header" I had just modified all the code, I need change a lot, but, I fixed almost all the errors. Thanks for the viewBox tip.

    0
  • Adriano•38,080
    @AdrianoEscarabotePosted almost 2 years ago

    Hi AndresFelipeForero, how are you?

    Welcome to the front-end mentor community!

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    Example:

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    this is a nice challenge to train this

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
    0
    Andrés Forero•150
    @AndresFelipeForeroPosted almost 2 years ago

    @AdrianoEscarabote Hi Adriano,

    Thank you for your help. I had to modify a bit, but I think that´s all.

    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