[Resolved] Some small layout issues on mobile

[Marijke]

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!

[Leo]

Hi there,

Can you disable the SG optimizer so we can inspect the issue better?

Thanks!

[Marijke]

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!

[Ying]

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 🙂

[Marijke]

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?

[Ying]

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 🙂

[Marijke]

Okay, I’ll mark this one as resolved then, thanks!

[Ying]

No problem 🙂

[Author]

Posts