Design comparison
Solution retrospective
I am very interested in creating two different screen layouts within the same CSS file. I will use media queries to apply different hover styles and plan to experiment with new techniques shortly.
What challenges did you encounter, and how did you overcome them?I am facing challenges with implementing different hover effects for various options, and it has taken a lot of time. I have used Google to find solutions.
What specific areas of your project would you like help with?I'm having trouble with hover effects not applying correctly on my buttons and layout shifting on larger screens. I’ve included the relevant CSS and HTML. Can you help identify and fix these issues?
Community feedback
- @chelsea-herePosted 2 months ago
Hi there, I found the layout shifting to be the most difficult part of this challenge. I found that the best solution was to have the popup component set to absolute so that it would have relative positioning to the parent, and not take up any real estate on the screen (ie. no layout shifting). Here is an article about this: https://www.geeksforgeeks.org/how-to-set-position-absolute-but-relative-to-parent-in-css/
I ended up creating a component and changing its document location and class names to take advantage of the appropriate parent. I based the mobile solution within the card component and the desktop solution within the button component. You can take a look at my solution here: https://github.com/chelsea-here/article-preview-component. hope this helps!
0
Please log in to post a comment
Log in with GitHub
Join 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