Responsive Flexbox Layout for Clans Main Page

[Skoivumaki]

BEFORE ASSIGNING YOURSELF SEE:

#225 (comment)

📝 Task Description

Implement a Flexbox-based div layout ([lng](helper)\clans\layout.tsx) for the planned components/containers on the Clans main page. The layout should be responsive, ensuring proper alignment and spacing for both mobile and desktop views.

---

✅ Steps to Complete

1. Plan the Layout:

   • Identify the key components and containers for the Clans main page. (see screenshot/figma)
   • Define their placement and hierarchy for desktop and mobile views.

2. Create the Flexbox Layout:

   • Use CSS Flexbox to structure the containers and ensure responsive behavior.

3. Test Responsiveness:

   • Verify the layout works correctly on various screen sizes, including mobile and desktop. (test using background-color)
   • Adjust styles or media queries as needed for optimal presentation.
   • Include screenshot of layout elements using background-color in Pull Request (use placeholder data etc)

---

📎 Additional Information

• Documentation:

  • CSS Flexbox Guide
  • Responsive Design Best Practices

• Screenshots/Examples:
  
  

---

[leolabdev]

@Skoivumaki Didn't you want to do it yourself?

[Skoivumaki]

@leolabdev The idea of this issue is just to create the initial layout with some CSS for the Clan Mainpage. I decided to split these tasks into 2 issues so theres more todo and so that theres issues of varying difficulty. Sidebar #299 is the task Im doing since it might have ended up becoming, as you said, "Gartic Phone"😄

[Skoivumaki]

Closed as #311 completed