How can i apply overlay for the design at bigger screen sizes ?
Hello, I did apply the overlay for the design at mobile screen sizes, but when it comes to bigger screens i can't, i searched Chatgpt, reddit, stackoverflow, and found nothing,
repository:
https://github.com/WaelBenseghir/stat-page
demo Url:
https://waelbenseghir.github.io/stat-page/
GitHub
GitHub - WaelBenseghir/stat-page: stats page
stats page. Contribute to WaelBenseghir/stat-page development by creating an account on GitHub.
6 Replies
You are currently applying an image using the "content" property. This is being placed over your existing content, including the semi-transparent image so it is hiding both the original image and the background color.
I suggest that you use a pseudo element for the overlay.
If you place a pseudo element over the whole image container this will remain over the added content on larger screens.
actually I am not sure that even that will work... I did a quick test and by using the "content" attribute to add the image it appears to be removing the pseudo element.
Why are you adding the image using the content property? I more normal approach for something like this would be to use background images for all screen sizes as it is purely decorative (at least as far as I can tell)
An added issue with using content to apply the image is that I don't think that you can maintain the image dimensions, it simply places the content "as is".
remove everything from
.intro except width in the media query and add height: 100%; object-fit:cover; on imgsince the image in the mobile screen and desktop screen are different, i had a problem before with changing images on different screen sizes, I found a post on stackoverflow saying you should use content.
what is a better way to change the img in a div on different screen sizes?
MDN Web Docs
Responsive images - Learn web development | MDN
That's a wrap for responsive images ā we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:
srcset š
Kevin has video on it https://youtu.be/B2WL6KkqhLQ?si=NRRmuEU9QpIfssp_&t=3405
Kevin Powell
YouTube
Taking on a Frontend Mentor challenge | Responsive Product Preview ...
Today, I'm taking on a popular Frontend Mentor challenge. We'll look at doing everything from downloading the files to putting the challenge together with HTML & CSS, and finally putting it on GitHub and getting it online using Netlify.
š Links
ā
The project Iām working on: https://www.frontendmentor.io/challenges/product-preview-card-component...