Latest solutions
Social Media Links using HTML and CSS
PSubmitted 7 months agoHappy for any feedback. Help with the transition problem I talked about in the problem section would be appreciated.
Blog Preview Card with HTML and CSS
PSubmitted 7 months ago-
When trying to get the text content to fit properly in the card-content section, I had issues with the tag having a default margin. Am I supposed to remove this margin in order to get things to size correctly? Did I do this the right way by specifying 0 margin on all elements at the top of my css?
-
What are some better practices I could have followed with my CSS?
-
I tried to follow the design from figma as much as possible, but this resulted in a lot of pixel values being specified, which I don't think is great for resizing and responsive layout. What could I have done better here?
-
The challenge says: The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries. I'd be keen to see how other people approached this. I know I could use vw units for the font size, but I don't know how to set the starting font size using pixels and then scale from there.
-
Latest comments
- @FahryWinataP@ImposterCodeVault
- It looks like the default margin on your h2 and h3 tags are pushing the text out a bit. You could set the margin on those tags in css like this if you wanted to adjust that:
h2 {margin: 0px}
- It also looks like you might have mislabeled a css class -> You have styling for an h1 tag, but in the html you are using an h2 tag. If this was intentional then no worries, just thought I'd point it out
Marked as helpful - @uixcemP@ImposterCodeVault
Looks good.
The design in the challenge has a border on the card, you can add this by adding this to your card CSS class:
border: solid 1px black;
Otherwise nice!
Marked as helpful - @GentlestanP@ImposterCodeVault
Nice job.
You can import the font used in the challenge into your solution by adding this inside the head tags:
<link href="https://fonts.googleapis.com/css?family=Outfit" rel="stylesheet" />
And then you can use the font in a class by adding this to the class:
font-family: "Outfit";
Marked as helpful