Design comparison
Solution retrospective
I used Flexbox for the first time in this project and struggled to center the main content of the page. Is there a best way to center the content with or without Flexbox?
This project involved a desktop and a mobile image included. I ended up displaying both images at the same time on the page, but would hide one of them using display: none;
for the respective layout. Is there a better way to display either the desktop or mobile image without having to manually hide one of them?
Community feedback
- @anar-solPosted about 1 year ago
Hello =)
Instead of using two separate
img
elements, you can usepicture
andsource
to specify different images for mobile and desktop depending on the viewport size.In my solution, I've set the mobile version as the default image and the desktop one starting at
640px
width viewport.<picture> <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900"> <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image"> </picture>
As you'll see in these MDN and web.dev articles, there are many other situations where
picture
andsource
can be useful.Marked as helpful2 - @HiQendresaPosted about 1 year ago
Hi @Grunt395 π
Congratulation on finishing this challenge, you did greatππ»
CSS Flexbox is great tool used in web development to create responsive and flexible layouts. π
You can learn more about it in this link
Here are some suggestions to help improve your code:
- It is not a very good idea to apply styles directly to the <body> selector because it is straightforward. Styles applied to the <body> selector can impact the entire page, making it suitable for setting background colors, fonts, and other global design choices. In this case you have only one container but in cases where there are more components in the page you will need to be more selective.
So the selector body should be more general like this e.g:
body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; overflow-x: hidden; max-width: 1440px; position: relative; }
-
A crucial element is missing in your code, which should always be included, whether it's a component or a full website, it is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.
-
You can set the content inside the <main></main> and give a max-width to the container.
<body> <main> <div class="container"></div> </main></body>
- To center the content, there are a lot of ways to do that. .parent-container { display: flex; justify-content: center; align-items: center; } or you can use ** margin: 0 auto;*** another way is using position absolute to the container.
Wish you good luck! Happy Coding π
Marked as helpful1 - @apurvpatel2121Posted about 1 year ago
use media query
.image { width: 100%; height: 300px; /* Adjust the height as needed / background-size: cover; background-position: center; background-image: url('desktop-image.jpg'); / Default image */
@media (max-width: 768px) { background-image: url('mobile-image.jpg'); /* Mobile image for screens 768px or smaller */ } }
Marked as helpful1 - @ImammikaPosted about 1 year ago
hello bro! you can just use one image tag next time, then use media queries to specify how you want the picture to look on smaller screens. all the best. Happy Coding.
1
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