Add Responsive View Toggle (Mobile/Tablet/Desktop)
Implement a feature that allows users to preview the generated website in different device screen sizes — such as mobile, tablet, and desktop. This will help users better understand how their website responds to different screen widths, improving usability and design quality across devices.
Proposed Implementation: Add a toolbar or dropdown with view options: "Mobile", "Tablet", "Desktop". Resize the live preview window (or apply corresponding CSS width constraints) based on the selected option.
Why This Matters: Responsive design is a key part of modern web development. Adding this feature will help users build mobile-friendly websites more effectively.
Let me know if I can take up this issue.
-GSSoC'25 Contributor
Assigned @shreya-ramesh
Hi @PrakharDoneria
I’d also love to contribute to this issue. My approach would be to add a responsive view toggle for Mobile, Tablet, and Desktop directly in the Karbon interface. Instead of just resizing, I’ll ensure the preview dynamically adapts to standard breakpoints (e.g., 375px, 768px, 1024px) so users get a more realistic device simulation.
This enhancement will give designers and developers a clearer sense of how their sites behave across devices, making Karbon even more user‑friendly. Kindly consider assigning me as well.
Added @pranavi290504 as contributor
Hi @PrakharDoneria,
I’m a GSSoC'25 contributor and would love to work on this issue!
The responsive view toggle will be a great addition to help users preview their website across devices. I plan to implement a toolbar with options like “Mobile”, “Tablet”, and “Desktop” that resizes the preview window using appropriate CSS constraints.
Kindly assign this to me. Excited to contribute further to Karbon!
Thanks, Jyothi
@jyothi-samberpu added
Thank you @PrakharDoneria for adding me as a contributor!
I'm excited to work on the Responsive View Toggle feature. I'll start by:
- Setting up the development environment
- Reviewing the current codebase structure
- Implementing the mobile/tablet/desktop preview functionality
Looking forward to contributing to Karbon!
Note: Removed @jyothi-samberpu from the list of contributors. Reason: Submitted PRs that do not adhere to contribution guidelines or reference relevant issues. Several submissions have included AI-generated code without proper testing, which has previously resulted in multiple issues and bugs in the Karbon project.
Please comment or reply @pranavi290504 and @shreya-ramesh if you are active in this issue.
Yes working
Please comment or reply @pranavi290504 and @shreya-ramesh if you are active in this issue. Yes, I’m active and following this issue.
Note: Removed @jyothi-samberpu from the list of contributors. Reason: Submitted PRs that do not adhere to contribution guidelines or reference relevant issues. Several submissions have included AI-generated code without proper testing, which has previously resulted in multiple issues and bugs in the Karbon project.
hello sir, I am sorry that I wasn't available these time due to some personal problems. I wrote the code and tested to check whether it is working then, I gave the same code to AI and asked for further improvements.
Issue: the issue was about seeing output in different screen size but I understood it wrongly and I added the options to view the karbon application in different screen size.
My Broken PR: So, when I wrote the code to view the karbon application to view in different screen size, I gave the same code to the AI to check whether if it can suggest better code structure. I WASN'T DEPENDENT ON AI COMPLETELY.
My doubt: later I realized the problem with my misunderstanding but, after running the karbon project when I typed to create any website like "create me a simple login page for my gym website", It got error. Would you like to clarify me here why am I getting this error? Do I need to do something else to run the project?
I would love to work further with Karbon and I request you to add me as a contributor._
Sorry @jyothi-samberpu We have already given you soo many chances to contribute, but we found you just use AI and update random things without testing. Thus we have decided not to allow you to join as contributor for any further issues.
Thank you It was nice working on this project with you. As it was my first contribution, I made some mistakes, and I appreciate you clarifying them for me.
On Sat, 23 Aug, 2025, 1:51 PM Prakhar Doneria, @.***> wrote:
PrakharDoneria left a comment (ProTecGames/Karbon#72) https://github.com/ProTecGames/Karbon/issues/72#issuecomment-3216563993
Sorry @jyothi-samberpu https://github.com/jyothi-samberpu We have already given you soo many chances to contribute, but we found you just use AI and update random things without testing. Thus we have decided not to allow you to join as contributor for any further issues.
— Reply to this email directly, view it on GitHub https://github.com/ProTecGames/Karbon/issues/72#issuecomment-3216563993, or unsubscribe https://github.com/notifications/unsubscribe-auth/BNQ5EBVEZEJFFMMCRFE2QX33PAQAZAVCNFSM6AAAAACC6HGAB6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTEMJWGU3DGOJZGM . You are receiving this because you were mentioned.Message ID: @.***>
Hi @PrakharDoneria ,
I’m a GSSoC'25 contributor and would love to work on this issue Add Responsive View Toggle (Mobile/Tablet/Desktop). Could you please assign me or add me as a contributor to this issue?
Thank you!
Added @Aditii-12 as contributor
Hi @PrakharDoneria,
I’m a GSSoC'25 contributor and would love to work on this issue. The responsive view toggle will be a great addition to help users preview their website across devices. Kindly assign this to me. Excited to contribute further to Karbon!
Thankyou!
Added @Anu0825 as contributor