Design comparison
Solution retrospective
This one was deceptive! It seemed easy at first, but I quickly found things I'd never done before.
The biggest issue was the jQuery. I would write a function that worked beautifully in mobile view, but when I switched to desktop, it would break. (And vice versa.) That footer just did not want to stay in place. Very frustrating! But with some brainstorming and Googling, I found that you can set a function to check for screen width and go from there. Amazing! I will be getting so much use out of that!
The other issue I had was the sort of "speech bubble" effect of the share footer in desktop view. I had never made a shape like that with CSS. However, I was able to make a little triangle and position it underneath the footer to create the desired effect. (Thanks to https://css-tricks.com/the-shapes-of-css/ !)
If you can see anything wrong, or have any feedback, I'd love to hear it. Thanks!
Community feedback
- @Amine-El-AlouaniPosted over 3 years ago
you can add this code it will fix the problem of the bubble in mobile
@media(max-width: 475px) { #arrow2{
top: 20px; right: 35px; margin: 0; } }you must learn more about position it will help you a lot good luck keep coding :)
Marked as helpful1@sorengreyPosted over 3 years ago@tom-donald Thank you so much! I will add that and give it a try today. I didn't see the mobile issue on my end, but now I do, lol.
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