@snehamoybag
Pierre ||| per.net
@finkenmannAll comments
- @finkenmann
Wow! I had so much troubles to find solutions with the background files, placed to the correct container and you did all so well. Your code is the perfect inspiration and answerd all my questions i had. Like the solutions you did between mobile and desktop design. I didn’t came to the clue, to build a .main container around the hero, features and cta section. But afterwards, if I see a good solution, it all looks so easy ;-)
- @finkenmann@finkenmann
First update: Fixed all report issues.
- @ArtoriasDelAbismo@finkenmann
Try to avoid pixel specifications in general. Use % to keep your elements dynamic. Your layout won't work below 620px, but should shrink further to display mobile views correctly. Use a max-width to stop growing your container. Or even better width: min(90vw, 800px). More about: https://www.youtube.com/watch?v=U9VF-4euyRo .main is somehow superfluous. Use the main tag for .main-container. Never use fixed heights. If an element needs more space in height, it must be able to grow. Set your img to min-width: 100% and leave out the height. Define the width the image should take in its parent element. .text does not need display flex. The normal behavior of the block elements already does what it should. Add flex only at your mediaquery for the two-column layout. Try to make your design mobile first. There are many sources on the internet that explain this.
Translated with www.DeepL.com/Translator (free version)
- @MercatorPoei@finkenmann
Your code has a few redundant elements. You can specify the centering directly in the body. flex and align-item: center is enough. Your .container doesn't need it anymore. The @media are completely unnecessary in this application. Just define your .qrcode with a width: min(90vw, 375px) and margin-inline: auto. This will center your element horizontally and your align-items in the body will be responsible for the vertical alignment. width:min(90vw, 375) means that depending on the viewport the smaller of the two values is used. On a narrow screen the width will be 90% of the viewport width, but with more space the element will grow to a maximum of 375px (or if you want to go bigger here, of course to a larger value). This way you need very little code and don't have to use unnecessary @mediaqueries.
Of course you have to pay attention to the warnings of the accessibility report.
Translated with www.DeepL.com/Translator (free version)
Marked as helpful - @MordenWebDev@finkenmann
Start with mobile first. That is, design the simple mobile design first and then add the more complex formatting for desktop. If you go the other way, there is often a lot of code that you have to reset. Most of the mobile design is already responsive if you don't use fixed pixel values. Then find the right breakpoint where the design doesn't work properly anymore or "falls apart" and add the more complex flex or grid formatting there. Don't need background images, because they are not readable for screen readers and alt-texts are not possible. Create two images and hide one or the other depending on media-query, or use img srcset. (I have to learn this better... but it is surely the best way).
.product-component must not have a fixed width. Tip: .product-component: width: min(90vw, 800px); margin-inline: auto. With this you have a nice flowing container, which takes 90vw (viewport width) on a small screen and is centered by margin auto. In addition, the margin grows a bit when you zoom in. At 800px the element doesn't grow any more. With this you can achieve a lot without defining a media query.
Where do you want to use sr-only? This class is needed if you want to hide something with visibility hidden, but it should remain readable for a screen reader.
Translated with www.DeepL.com/Translator (free version)
- @gomes-leonardo@finkenmann
you should check your breakpoints. A lot of mobile devices going down to 320px. At this point your layout is broken. Also the value for the desktop version. Make it bigger or use flexible values for your container and the child elements to be more flexible.
Marked as helpful - @stkhalisha@finkenmann
I like your approach to implementing responsive behavior. I had to think about how to implement that as well, but came up with a different solution.
What I like is that you don't make the width before the breakpoint grow even more, which just makes the page fall apart. (That's why I chose my breakpoint earlier, but got other problems ;-) Also nice is the solution for the desktop, where you let the elements grow in height. In real life you could use a higher resolution photo, so that it can grow in size.
Hmm... let's see if I should rebuild my version. But I'll wait and see if there is any feedback.
Translated with www.DeepL.com/Translator (free version)
Marked as helpful - @PranavMaru22@finkenmann
My first tip to solve many problems in your project: Go mobile first. Create the page for the single-column mobile version first and then add
@media (min-width: xxxpx)for the customizations for the desktop.Give your container a width of e.g. 90vw (viewport width) and margin 5vw (this gives you the same gap on top). This way the container is nicely centered and your content doesn't stick to the edge... and its already responsive, because it grows nicly.
For the mobile layout you don't need flex at all. Just arrange the block elements one below the other and everything fits.
For desktop only a little code for flex elements is needed. One for the main elements and one for the stats list.
My last tip... Make sure that you have a live server running in your working environment, where you can immediately see every change in your code. Use vs code as editor and install the extension live server, if don't use this editor already ;-) . This also helps you to keep track of your work. If you do a lot of work before you look at the result in the browser, debugging is much harder. Use FireFox for development. The responsive preview is better and clearer than Chrome's dev tools (my opinion ;-). I like the responsive preview in FireFox because it shows up without the whole develpment windows, which often use too much room on my screen. But if you need it, you easily can open them. Shortcut is alt ctrl m to open the responsive view.
Marked as helpful - @amd42@finkenmann
Do not give your images a fixed height. This will warp them, which is very unattractive. height: auto keeps the correct aspect ratio when zooming in/out. And yes ;-) I see that this correction breaks the layout. But I also made a compromise with my solution here, which I think is ok from my point of view.
- @Gonzalop0210@finkenmann
I would give your container a max-width so the layout doesn't grow endlessly and the page falls apart. ... and you forgot the rounded corners ;-)
- @Guilherme-Goncalves-de-Souza@finkenmann
Nice and minimalistic code. But from my point of view a bit too reduced.
I miss the responsive behavior for older mobiles down to 320px. On this width the layout doesn't work correctly anymore.
perfume you should’n do with spaces, but with
letter-spacing: 0.5.rem.From my point of view, the layout is too static, but I don't know if that's intentional.
I would use mobile first approach. The main code mobile and for bigger screen @media (min-width: xxx).
In mobile version the image will be squeezed, if you squish the browser, because you defined a height at .main. If you view the page in landscape mode, content will be cut off. Scrolling would be the correct behavior.
Translated with www.DeepL.com/Translator (free version)
Marked as helpful
