Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Product Card redesign

    General Discussion
    2
    5
    365
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      haseebkamboh last edited by

      Hi everyone,

      I'm currently working on redesigning the product card layout for the mobile view of our website. I want to display two product cards side by side on the front page, ensuring that the design remains clean, user-friendly, and visually appealing.

      Screenshot 2024-05-19 at 10.14.51 AM.png

      Screenshot 2024-05-19 at 10.39.27 AM.png

      1 Reply Last reply Reply Quote 0
      • Rishabh-Webkul
        Rishabh-Webkul last edited by

        Hello @haseebkamboh

        Greetings of the day..!!

        If you want to show 2 products in mobile view kindly go to packages >> Webkul >> Shop >> src >> Resources >> views >> components >> products >> carousel.blade.php this file and make your changes set minimum width and height accordingly.

        Frontend

        modileDesign.png

        Thanks & Regards..!!

        H 1 Reply Last reply Reply Quote 0
        • H
          haseebkamboh @Rishabh-Webkul last edited by

          @Rishabh-Webkul
          I've been working on customizing the product card layout for the mobile view in Bagisto. My goal is to display two product cards side by side on smaller screens while maintaining an appropriate size for desktop screens.

          I attempted to adjust the minimum width of the product cards by changing the class from min-w-[291px] to min-w-[281px]. However, this change affected the card sizes for both desktop and mobile views in unexpected ways, causing layout issues and making the design cluttered and difficult to manage.

          Despite following the recommended approach of modifying the file located at packages/Webkul/Shop/src/Resources/views/components/products/carousel.blade.php, the adjustments did not yield the desired results.

          I'm finding it challenging to customize the layout effectively within Bagisto’s structure. Could anyone provide guidance on why these changes might be causing such issues and suggest a more reliable method to achieve the desired responsive design? Additionally, any tips on simplifying the customization process within Bagisto would be greatly appreciated.

          Thank you!

          Screenshot 2024-05-20 at 12.43.56 PM.png

          Screenshot 2024-05-20 at 12.41.43 PM.png

          H 1 Reply Last reply Reply Quote 0
          • H
            haseebkamboh @haseebkamboh last edited by

            @Rishabh-Webkul
            Waiting for your response. thanks

            1 Reply Last reply Reply Quote 0
            • Rishabh-Webkul
              Rishabh-Webkul last edited by

              Hello @haseebkamboh

              Greetings of the day..!!

              To make it compatible and responsive with the mobile and desktop view then for this, you have to write media query in this file.

              Thanks & Regards..!!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post