RayChavez Posted August 17, 2023 Share Posted August 17, 2023 Hello, I am trying to make one of my sections on the desktop version a carousel and the same section in mobile version as a banner. It doesn't allow me to have the 2 versions be different designs. How do I do this? I will provide a screenshot of what I want each to look like without changing the other. Thanks! Link to comment
Lesum Posted August 17, 2023 Share Posted August 17, 2023 @RayChavez It can be done with some custom code. You can create two sections, one with banner and other one with carousel. Then with custom code we can hide the banner section on desktop and carousel section on mobile. Let me know if you need help with the code. Thanks! RayChavez 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
RayChavez Posted August 17, 2023 Author Share Posted August 17, 2023 Thank you! Yes, I will definitely need help with code. How could I go about doing this? Link to comment
Lesum Posted August 17, 2023 Share Posted August 17, 2023 @RayChavez First create two sections, one with banner and another with carousel. Then if you can share your site URL, I can write the required code. Thanks! RayChavez 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted August 17, 2023 Share Posted August 17, 2023 @RayChavez I can't access the site. Can you maybe try to publish the site with a password? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Solution Lesum Posted August 17, 2023 Solution Share Posted August 17, 2023 @RayChavez Here's a code snippet to try: @media only screen and (min-width: 768px) { /* Hide banner section on desktop */ section[data-section-id="64dea75c9def2d79b6323630"] { display: none !important; } } @media only screen and (max-width: 767px) { section[data-section-id="64dea75c9def2d79b6323630"] { display: block !important; } /* Hide carousel section on mobile */ section[data-section-id="64dc0e4ec8650f601e7881d5"] { display: none !important; } } Let me know how it goes. Thanks! RayChavez 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
RayChavez Posted August 17, 2023 Author Share Posted August 17, 2023 Works great! Thank you so much! Lesum 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment