Submitted about 2 years ago
Responsive Landing Page using CSS Grid and Flexbox
@Victor-Okpukpan
Design comparison
SolutionDesign
Solution retrospective
I found it difficult to move the SVG background for the mobile view. Any help here would be appreciated.
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Victor Okpukpan, congratulations for your new solution!
Answering your question:
To fix your background the mobile version use these properties:
background-size: contain; / background-repeat: no-repeat;
Here's the changes I did to your code:
@media only screen and (max-width: 768px) body { width: 100%; height: auto; padding-bottom: 10px; background: url(./images/bg-mobile.svg), var(--background-color); background-position: center; background-repeat: none; background-size: contain; background-repeat: no-repeat; }
π I hope this helps you and happy coding!
Marked as helpful0
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