Skip to content
OverviewSolutions
17
Comments
1
Anwar
@Anwar11234

All comments

  • Hdev•215
    @hemanuelaSubmitted over 3 years ago

    Update 17/07 I got some tips and finally solve the background color image and the mobile adjustment.

    16/07 This is not my "ideal solution", but I decided to post to record my attempt. I tried with grid, but the background color image was (is) a big issue for me. I tried so many times, that I made two code files, and to post I chose to use media queries to transform the screen adjustment.

    I have another code (flexbox) and maybe when I finish, I will post too.

    Feedbacks are welcome!

    Stats preview card component main (first attempt)

    1
    Anwar•375
    @Anwar11234Posted over 3 years ago

    instead of using two divs: ` `` <div id="picture"> <div class="picture-1"></div> </div>

    <div id="picture-mob">
  <img src="images\image-header-mobile.jpg" alt="picture">
</div>```

    you can use only the div with an image inside and make the color overlay using a pseudo-element, and the same code works for both mobile and desktop

    I made some modifications to the index.html and style-ok.css file and sent a pull request with them.

    if you don't know about pseudo-elements check these videos: https://www.youtube.com/watch?v=zGiirUiWslI https://www.youtube.com/watch?v=xoRbkm8XgfQ https://www.youtube.com/watch?v=djbtPnNmc0I

    Marked as helpful
    0