Skip to content
OverviewSolutions
35
Comments
11

Stephen Ikuomola

@stephenikuomolaNigeria590 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

My goal is to enhance my proficiency in vanilla JavaScript by constructing progressively challenging projects ranging from beginner to guru level. The ultimate objective is to attain mastery of the language.

Latest solutions

View more solutions

Latest comments

  • Stephen Ikuomola•590
    @stephenikuomola
    1. Hello Pon Huang!!!

    Increase the line-height of the description class to about 1.5 or you multiply your font-size by 1.5 to get an appropriate font size in px's.

    Just had a look at your code and I think the reason you are having issues with mobile version was because you made the container have a width of 50vw at a media query which has a max-width of 45rem. I personally think it's best you work with rem or px units in this situation. So you can do something like this: container{ width:85%; max-width:380px} or you could also do this container{ width= min(85%, 380px}

    Then finally on that same container class you can add a margin-inline:auto or margin:0 auto or margin-right:0 then margin-left:0.

    I think this solves your problem with the mobile version.

    Happy Coding Pon Huang :)

  • Stephen Ikuomola•590
    @stephenikuomola

    Hello Remtaine!!!!

    This is fantastic and really impressive from you as well. For the color filter for the image on the image class, element or id, you should apply the following properties;

    img{ filter:opacity(75%); mix-blend-mode:multiply; }

    This will give the image that effect as it make the background-color blend with it giving it that dark effect on the image.

    Marked as helpful
  • Stephen Ikuomola•590
    @stephenikuomola

    1. You need to give your text a particular font-size.

    2. You can also check the <div class="annual"></div> and make that container to have a display:flex. Also set the annual class to be a percentage of the card as well and add margin left and right to have a margin of auto.

    3. You can also set the width of the button to be a percentage of the card and make it have a margin left and right of auto. That way the button will be responsive.

    4. I DO NOT think you need to set the <main> tag to have a width of 50% as that will make the card to shrink in width as the viewport decreases.

    I think that is all for what might be giving you problems in terms of the responsiveness.

    Happy Coding David Adenusi!!!!

  • Stephen Ikuomola•590
    @stephenikuomola

    You can get the colour overlay on the image, by doing this; `img{ filter:opacity(75%); mix-blend-mode:multiply; }

  • Stephen Ikuomola•590
    @stephenikuomola

    Just finished up this project and to me it looks not so bad but I will appreciate some help if any from the community where possible to help me improve on what I did.

  • Stephen Ikuomola•590
    @stephenikuomola

    To make the image appear very close to the one you have on the design, use:

    filter: opacity(75%); mix-blend-mode: multiply

    This should be done on the image.

View more comments