Design comparison
Solution retrospective
Hello fellow coders! I'm Joshua and this is my solution for this challenge.
In Summary I used:
- Flexbox
- JavaScript
I'm still quite new to frontend development and try to be aware of best practices.
-
What can I do to improve my HTML/ is it semantic enough?
-
Is my approach with the JS an appropriate one?
ALL FEEDBACK WELCOMED! THANKS FOR READING
HAPPY CODING!
Community feedback
- @mraditya1999Posted over 1 year ago
for simpler solution to make it responsive and elegant design you can follow these steps:
/* CSS code for the container and the two divs */ .container { display: flex; } .left-section, .right-section { width: 50%; height: 100%; } .right-section { background-image: url("path/to/your/image.jpg"); /* Set background image for the right section */ background-size: cover; /* Adjust the background image size to cover the container */ background-position: center; /* Center the background image within the container */ } /* Media query for screen sizes below 800px */ @media (max-width: 800px) { .container { flex-direction: column; /* Display the divs vertically on smaller screens */ } .left-section, .right-section { width: 100%; /* Make the divs occupy full width on smaller screens */ } }
With this CSS code, we create a container with flex display and two divs inside it,
.left-section
and.right-section
. Both divs will have a width of 50% each, occupying half of the container's width. The.right-section
will have the specified background image, which will cover the container and remain centered within it.For smaller screens below 800px, we use a media query to change the flex-direction to column, making the divs stack vertically. We also set both divs to occupy the full width, eliminating the repeating background image and ensuring a clean and professional design.
Marked as helpful1
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