Skip to content
Submitted about 2 years ago

Responsive block with CSS Grid

barbarian10•10
@barbarian10
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Why does the div overflow the border on different devices (e.g., iPhone 12 Pro)? How to fix it? Why does the third div (why) appear smaller in width than the second (subscription) on iPhone 12 Pro? How to fix it?

Code

Please log in to post a comment

Log in

Community feedback

  • Kaylo•270
    @KayloPortal

    🎊Hello! Nice job

    • I don't understand your first question, but for the second question, I hope I can provide a good solution.

    • In the .grid class, a width of 240px is set for each column. This means that each column should be at least 240px wide. It is obvious that in devices with a width of less than 480px, such as the iPhone 12, it becomes smaller due to the lack of enough space.

    🎄How to fix the problem:

    1/ Using media query and rem:

    • The size of the rem unit is based on the font size in the <html> tag. By default this size is 16px.

    • According to this case, rem size can be changed by using media query in different view port sizes

    • for example : @media (max-width: 1440px){ html { font-size: 16px; } }

    This piece of code sets the size of the html font-size to 16px, on devices with a width of 1440px and less. you can use a rem unit and change it for different viewports, instead of using fixed points like px.

    2/ Using media query and grid

    • Since the ratio of the mobile is different from the desktop, it is obvious that the arrangement of the elements is also different in these two devices. As we can see in the designed file, due to the smaller width of mobile devices, we need to change our Grid design from a two-row and two-column design to a three-row and one-column design in a viewport width of less than 800 pixels.

    • Also, there more different ways to fix these type of problem and make the elements more responsive, like setting fr or ch width on elements, or using clamp(), min() & max().

    • You can google "Responsive Layouts" & "rem & em units" to get more information about it

    • I hope it was useful✨

Join 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