Jonfernando Alfaro• 100
@Jxnfernandx
Submitted
I am still unsure about the units I should be using when sizing, so I went ahead and used rem and em instead of px.
P
Jeff Lang
@jefflangtech
All comments
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
@JoshuaMeeks
Submitted
Maybe someone can help me to understand why my icons aren't showing up once depolyed yet are there locally?
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
@jchapar
Submitted
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!
Hey Jose! 👋
What I tried with this challenge was using
background-imageon the div or section versus a specific image element.Background-imagegets you access to these other properties:background-positionbackground-repeatbackground-sizeand more!On my project I got a bit more specific using
background-position-xandbackground-position-yto 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 - bundasse• 100
@bundasse
Submitted
I wrote 'del' to deleted price $169.99, but it does not work! What's wrong with it?
➡Now I find what's the problem. Thanks!!!😁
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
