Stats preview card component using HTML and CSS

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  You can make use of the picture element inside the html file and you can remove it from the css file.

  <picture>
    <source media="(min-width: ***px)" srcset="images/image-header-desktop.jpg">
    <source media="(min-width: ***px)" srcset="images/image-header-mobile.jpg">
    <img src="images/image-header-desktop.jpg" alt="">
  </picture>
  

  Replace *** with the width which you want a certain image to show.

  You used filter to create the overlay. You need to fix it and use mix-blend-mode: multiply; and opacity: 0.8;

  If this is not clear to you, let me know

  Marked as helpful

  0

  ---

  

  Freedteck•130

  @FreedteckPosted about 1 year ago

  @hitmorecode Wow! I never thought of the picture. Thanks a lot. I'll try it out

  0
• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  Hey buddy......hope you doing great, here's what I would suggest you to do

  • give a ids of mobile and desktop to your images........ now apply the below styles

  #mobile{
       display: hide;
  }
  #desktop{
       display: block;
        some other styles to position the image/height and width etc....
  }
  

  • now you can use media queries to assist you for achieving your image switching on reducing the width.......

  @media screen and (max-width: mobile-width/any width you want in px){
           #mobile{
                           display: block;
                           other styles that at you want
             }
           #desktop{
                         display: none;
            }
  

  That will do the work.....hope this helped you, glad to help you buddy!! Keep learning and coding!!!

  Marked as helpful

  0

  ---

  

  Freedteck•130

  @FreedteckPosted about 1 year ago

  @freaky4wrld Thanks so much for this. Though I used mobile first, I'll tweak this a little.

  0