Correct The 2 Columns Layout On Mobile So That The Size Adjusts Based On Screen Size

Technical Q&A

Topic summary

  • Mobile two-column layout does not adjust to screen size; requester seeks a fix to make columns responsive on small devices.
  • Reference materials include a live site (https://avokitchen.com/) and a video showing the problem; these attachments are central to understanding the issue.
  • Goal is for column sizes to dynamically adapt based on device width so the layout remains usable on mobile.
  • Technical context: responsive design—layouts that use flexible sizing and breakpoints to adapt to varying viewport widths; no code snippets or specific implementation details were provided.
  • No solutions, decisions, or differing viewpoints have been shared; it’s a request for help.
  • Status: open and awaiting guidance or recommendations (e.g., media queries, fluid units, grid/flex configuration).
Summarized with AI on January 24. AI used: gpt-5.
1

Hello,

I’m trying to correct the 2 columns layout on mobile so that the size adjusts based on screen size

Here an example of what i’m referring too down below on the video. URL - https://avokitchen.com/

PROBLEM - https://share.getcloudapp.com/9Zuyx4wN

Any help I will gladly appreciated!