Responsive Project tracking intro component using HTML, CSS & JS
Design comparison
Solution retrospective
Hey everyone,
This is my solution to the Project tracking intro component. All feedback is welcome and greatly appreciated.
What specific areas of your project would you like help with?I would like feedback on the mobile version of my website. I have an iPhone SE and can't scroll past the image to see the section content. I have the transform
CSS property on my image.
section < img{
transform: translate(10%) scale(1.1);
}
I am unsure if that is causing the issue and if you have any suggestions, please let me know.
Thanks, Rebecca
Community feedback
- @adityaphasuPosted 8 months ago
Hey Rebecca, the reason you can't scroll past is not because of the
transform
on the image but instead, it's theoverflow: hidden;
on the body.The
min-height: 100vh
on thebody
sets the height of the body element to be equal to the viewport height, so it fills the entire screen, andoverflow: hidden
will hide any content that overflows the boundaries of the body element and in this case its all the content which is coming after the image so you just see the image and can't scroll.If you remove the
overflow
from the body then it's just a partial fix, as that will only make that horizontal scroll bar reappear (which you might be trying to hide initially haha)Fix:
- Remove the
overflow: hidden
from thebody
first. - Now there are 2 possible things you can do:
- Simply add the
overflow: hidden
to yoursection
tag. (This project doesn't have any other content that can be clipped by the overflow so it's okay for this specific project) - The 2nd approach which I feel is good in the longer run is to encapsulate the
img
in its owndiv
and then apply theoverflow: hidden
to thisdiv
. (you have to move the styles fromsection > img
to theimg
tho) like this:
//the Image container div div { overflow: hidden; } img { // give it a class name if you want to width: 100%; height: 100%; object-fit: cover; transform: translate(10%) scale(1.1); padding-block: 2rem; }
This usually will save you the trouble for any future changes in the styles of other things inside the section.
and that's it!
You can go with either solution you like! I just wanted to state that there are multiple ways to solve this problem ๐
Tip: Try to use the browser dev tools whenever you get stuck styling something and inspect the elements to find the culprit that is causing the issue.
Hope this helps and happy coding! ๐ฅณ
Marked as helpful1 - Remove the
- @adonmez04Posted 8 months ago
Hi, I couldn't scroll your page using Brave and Firefox on the desktop. I think there's a global problem with your code.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord