@snehamoybag
Latest solutions
Latest 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
