Having a few issues with Product Landing Page

HTML-CSS
1

Here is a link: https://codepen.io/Harviator/pen/yLVqbwg

I think my problems are within the CSS.

Tell us what’s happening:
I have the problems commented within the code. However, I’m having the following issues:

  1. Within CSS grid, the space between rows is too much. I’ve tried playing with grid-gap, grid-row-gap, margins, and padding and I can’t seem to make it smaller.

  2. I used some Google icons and I can’t seem to change their size. I tired using font-size like google says you are suppose to, but they don’t change.

  3. Near the bottom of the page I have two flexboxes and the space between the text and the top of the box is a lot. I’d like to reduce it, but when I played around with justify-content, align-items, padding, and margins I don’t seem to be able to reduce it. I’ve also tried playing with the vertical-align property, but didn’t help either.

Any help would be great! Thanks!

Your code so far
Please see link at top and the comments in CSS.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

1 Like
2

  1. The space is from the top and bottom margin in your h3 element.

    margin
    margin1398×607 71.2 KB

  2. Under your “.material-icons” class, you can add “!important” after the font size to make sure it’s not overridden.

  3. For your last issue, looks like it can be solved by adjusting the margin as well.

1 Like
3

Perfect! Thank you! I think I was just trying in the wrong places and forgot about “!important” for number 2.

Thanks again!

4

Hello my freeCodeCamp colleague, I am on the same project as you, maybe we can collaborate and finish projects together
Thanks to your project, I am using some it as an inspiration
Let me know what you think about my idea

5

Hi ibahcode, thanks! I’m honoured. I’m not on the forum a whole lot unless I’m really stuck and I have a fairly limited amount, but feel free to reach out if you think I can help.

6

I mean’t like a code-body or something.
But no worries, I will surely reach out to you whenever I need help
Thanks :+1:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.