How to fix Dawn theme mobile dropdown going off screen?

Store Design
,
1

Hello,

I am using Dawn theme. Instead of using the normal mobile sorting/filtering system, I edited my site code so that I would be able to use the desktop filtering method on mobile, as it stands out more and looks better overall. I have included an image of the issue. The dropdowns go off the page on mobile.

Link to a page on my site that has the issue:

My website

Screenshot of issue:

RamenGlow_0-1679854057740.png
RamenGlow_0-1679854057740.png812×734 275 KB

With CSS, I am able to move the dropdown over using ‘left: -11rem’ for instance. But this impacts all of the dropdowns because they all use the same class. So it can fix the dropdown in the screenshot, but it causes the ‘Device’ dropdown to go offpage.

Thanks for your time !

2

Hi @styleshop27 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

You can use id because it unique

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

3

I will try this later and get back to you.

Thanks for the quick response.

4

Hey, I just accepted your answer as a solution- it worked great. I have another question. Is there a way to make the dropdown close when a selection is made? Currently, when a user selects an option, it will update the page with the filter applied, but the dropdown remains open.

Thanks!