Skip to content
OverviewSolutions
13
Comments
4
P
Jeff Lang
@jefflangtech

All comments

  • Jeff Lang•280
    @jefflangtechPosted over 1 year ago

    Hey Jonfernando, nice work! I wanted to respond to your note about rem's and em's vs pixels because I went through the same thought process. Lately I've been only using rem's and here's how I set it all up:

    • Find out what the base font-size should be (in px) and set that in my :root. This size in pixels will often be a very common denominator of all the other sizes used in the design.
    • Create a spreadsheet where I can calculate the rem's for other elements based on my root font-size

    I personally like the idea of rem's because I know that everything will be relative to the :root font-size.

    And I checked out your CSS and the only thing I noted was you have a lot of separate rules with:

    font-family: 'Montserrat', sans-serif;

    Maybe throw that into the body and only change the font-family on the other elements as needed? Just a thought to save you some typing.

    Happy coding!

    Marked as helpful
    1
  • JoshuaMeeks•120
    @JoshuaMeeksSubmitted over 1 year ago

    Maybe someone can help me to understand why my icons aren't showing up once depolyed yet are there locally?

    Results Summary Component

    1
    Jeff Lang•280
    @jefflangtechPosted over 1 year ago

    Hey Joshua 👋

    Looks like there is at least an extra "." in your image address. Here's an example:

    <img src="../images/icon-reaction.svg" alt="reaction icon">

    Starting from the file location of your index.html, the first "." is going to move to the parent folder, then the next "." is going to move outside that parent folder, then look for the images folder.

    Maybe you have your folders set up differently on your local machine.

    So just take out one "." in each image address in your github repo and it should work (I tested in chrome dev tools), like so:

    <img src="./images/icon-reaction.svg" alt="reaction icon">

    Or, simply:

    <img src="images/icon-reaction.svg" alt="reaction icon">

    If that's the solution then maybe just try exactly mirroring your folder structures on your local machine as well as when deployed.

    Hope that helps! Cheers

    Marked as helpful
    1
  • Jose Chaparro•455
    @jchaparSubmitted over 1 year ago

    Hello Everyone! I very happy with how my challenge looks on the specific width dimensions shown in the Figma file. However, when I'm in between width sizes or playing with the width of my browser, my some components are off. Specifically the images. Any feedback how making images a bit more responsive would be greatly appreciated!

    Mobile First Responsive Page utilizing CSS Grid & Flexbox

    2
    Jeff Lang•280
    @jefflangtechPosted over 1 year ago

    Hey Jose! 👋

    What I tried with this challenge was using background-image on the div or section versus a specific image element.

    Background-image gets you access to these other properties: background-position background-repeat background-size and more!

    On my project I got a bit more specific using background-position-x and background-position-y to place that image exactly where I wanted it on (or off) the page. And by making those dynamic in media queries the image could move around a bit during resizing.

    Let me know what you think of my solution! E-learning landing page

    Nice job! Hope you have fun coding!

    Marked as helpful
    0
  • Jeff Lang•280
    @jefflangtechPosted over 1 year ago

    Hello!

    One way you could approach this is to keep all your information and structuring in the HTML file, and use CSS for all styling. Personally, for me, that's an easier way of thinking about how to make it all work well together.

    Here's a way to get the strike-through with CSS (using your HTML):

        del {
        text-decoration: line-through;
    }

    Have fun! 😁

    Marked as helpful
    0