Skip to content
OverviewSolutions
32
Comments
2
Dineshraj
@DineshrajAnandan

All comments

  • Julian Ifesiokwu•475
    @JulianIfesiokwuSubmitted over 3 years ago

    Hello everyone, this project is tough for some reason, mobile view i think is completed, but its the desktop view i keep having problems. First the border radius is being applied from mobile view, then the bottom is uneven- i dont know why? Any help is appreciated.

    Article Preview Component

    1
    Dineshraj•540
    @DineshrajAnandanPosted over 3 years ago

    Hi Julian,

    A Few Things I have noted.

    You have set border radius for information class as 0 0 10px 10px for mobile view. This has to be changed to 0 10px 10px 0 for desktop view.

    To fix the height of the image in desktop view, you can set height: 100% at main-image class.

    And for creating the tooltip in the desktop view, you can use simple CSS. you can refer to this one if it helps. "https://www.w3schools.com/css/css_tooltip.asp"

    And I have just attempted the same challenge recently. Please refer to my solution if it helps. https://github.com/DineshrajAnandan/FrontEndMentorChallenges/tree/main/article-preview-component

    0
  • Dineshraj•540
    @DineshrajAnandanPosted over 3 years ago

    Hi, I was working on the same problem for positioning the two background images.

    this CSS property has worked for me

    background-position: right 50vw top -90vh, left 50vw top 41vh;

    Here, I'm using viewport height, viewport width, and position reference. In this case, no media queries are needed.

    I hope, it helps you too.

    For reference, https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

    0