Archived topic
Some small layout issues on mobile
7 replies · Started by Marijke on June 11, 2021
Hi! I have two issues on the mobile version of my WooCommerce site that I can't find solutions to here on the forum.
1: The price slider widget is broken and I have no clue why. Can I do something about this or should I ditch it? There is also a lot of space between the widgets, is there any way to reduce the bottom margin on mobile devices only?
Screenshot: https://www.screencast.com/t/O3cWKkixP5v
2: Because the product variation names are a bit long, they get wonky on mobile. Can I place the dropdown menu below the product name rather than next to it on mobile only?
Screenshot: https://www.screencast.com/t/YvbdZFENqA
Thanks in advance!
Hi there,
Can you disable the SG optimizer so we can inspect the issue better?
Thanks!
LOL. Of course disabling it fixed the price slider. I'm switching to FlyingPress anyway so I'll leave that plug-in off.
That leaves the excessive white space between the widgets on mobile and the variable product thing. Any pointers by any chance? Thanks!
Hi Marijke,
Give this CSS a try, see if you are happy with the result :)
@media (max-width: 768px) {
.woocommerce div.product form.cart .variations tr {
display: flex;
flex-direction: column;
}
}Let me know :)
Thanks Ying, that was exactly what I needed!
As for the distance between the widgets on mobile, I used the max-width 768px to set the margin-bottom for the widgets to -10 and that helped, not sure if that's the best solution? If it is, feel free to mark this as resolved. :)
Edit: Ran into another issue. I'd like to display a different secondary menu on mobile than on desktop (on mobile I want to add three pages). Is there a way to do this? Should I open a new topic?
max-width 768px to set the margin-bottom for the widgets to -10
Sure, you can do that.
For the new question, could you open a new topic?
Thanks and you are welcome :)
Okay, I'll mark this one as resolved then, thanks!
No problem :)
