Skip to content
OverviewSolutions
35
Comments
11
Stephen Ikuomola
@stephenikuomola

All 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.

  • Stephen Ikuomola•590
    @stephenikuomola

    Just had a look at your work and it looks good just needs some little adjustment. The line height for the heading should be smaller as it carries a larger font-size hence making the typography better. The p-tags <p> should have larger line-heights.

    The active states for the footer section could also be applied as weld.

  • Stephen Ikuomola•590
    @stephenikuomola

    I think you provided a wrong link to preview the site. Had a look at your code and I could not see you add any media query.

    To add a media query you should use this: @media screen and (max-width: 500px){ Here, pass in the new CSS rules you would like to apply at this break point which in this case is 500px; }

    Marked as helpful
  • Stephen Ikuomola•590
    @stephenikuomola

    Good stuff Lovish!!!

    Would advice you have another look at how you could make the curved section appear on the landing page as it is not there when viewing the live site.

    Would also advice you take a look at the report which is given after every project is submitted on front-end mentor as it will help you improve.

    Marked as helpful
  • Stephen Ikuomola•590
    @stephenikuomola

    I was finally able to come up with the solution to my problem which I occured in my first attempt of this project thanks to stackoverflow. So I decided to do the project again and this time I added an attribute to the svg element which is preserveAspectRatio="none". I used this as I noticed that the background-image was not giving me the correct positioning I needed across other browsers like Safari.

  • Stephen Ikuomola•590
    @stephenikuomola

    Just had a look at your work and I have comments to make:

    1. The curved section does not look noticeable on the laptop view as well as the mobile view.

    2. Incase you are having issues with the curved section across multiple browsers you can add this preserveAspectRatio="none" just after the <svg in the svg tag.

    3. I also did not see where you implemented the background image for the curved section into your code.

    4. You can read the report by clicking the view report button and this will help guide you to solve some of the accessibility and html issues you are facing.