Hi on both desktop and mobile the collection carousel is not centered. Also the main product images on mobile are too small now. Please help
website:studio-seductress.com
Hey there!
For centering the collection carousel on both desktop and mobile, you can adjust the CSS for the container. Here’s a quick solution:
- CSS for centering the carousel:
.collection-carousel { display: flex; justify-content: center; align-items: center; margin: 0 auto; }
This should center the carousel on both screen sizes.
As for the product images being too small on mobile, you might want to adjust the media query to make them larger. You can add something like:
@media (max-width: 767px) { .product-image { width: 100%; height: auto; } }
This will make sure your product images resize appropriately for mobile.
If you’d prefer an easier, no-code solution, I’ve got an app called EasyEdits that allows you to make these changes directly in your store without having to touch any code. You can try it out for free during the trial period and keep your edits without paying anything. It’s a quick and simple way to adjust things like this without worrying about code! You can check it out here: EasyEdits.
I’m the developer of EasyEdits, so if you need help with that, feel free to reach out!
Let me know if you need more help with anything else!
Hi but where do I put these codes?thanks
I would create a new theme, click “edit code” then add it to your ‘base.css’ or similar file. I also would really recommend EasyEdits to make edits easier if you’re not comfortable with code. You click and change without touching code, and keep the edits even if you don’t pay for the app.
Let me know if I can help more!
Can easily add to code if I know where it goes. This code however does not work under base.css. Thanks