How to fix mobile layout issues with overlapping buttons?

Solved

How to fix mobile layout issues with overlapping buttons?

SamGXO
Excursionist
38 3 5

Hi.
My website layout looks good on desktop but my layout of my mobile has many problems.

All the buttons are floating and overlapping each other.
Language, FB Messenger, Shopify Chat, its all a mess.
If you use a mobile to view my website: bluerose-collections.com you will be able to see it.

I would like to:

1) Put the Language buttons in a drop-down menu on the left side, below the Menu drawer button
2) Put the Shopify chat button: "Questions? We can help." fixed at the bottom of the footer.
3) The language buttons at the bottom are from an app that I have deleted. They are not the same app as the one on top. Hide or Remove this button.
4) Keep Only the FB Messenger button floating at the bottom.

2021-08-17.jpg




WhatsApp Image 2021-08-17 at 10.24.44 PM.jpeg

Accepted Solution (1)
oscprofessional
Shopify Partner
16405 2444 3195

This is an accepted solution.

oscprofessional_0-1629260212281.png

button not visible

and you can set the top position by modifying this css

oscprofessional_1-1629260293915.png

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...

View solution in original post

Replies 6 (6)

oscprofessional
Shopify Partner
16405 2444 3195
@media only screen and(max-width:749px){
div#gtranslate_wrapper {
    top: 15% !important;
}
ul#etranslate-language-list-link {
    display: none;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If your store is having this media already (for mobile version) then no need to add whole code . Only just add css in that media ie 749px(already exist)

also : I cant find "Questions? We can help." button on footer

oscprofessional_0-1629217815092.png

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
SamGXO
Excursionist
38 3 5

Ok. I will try it.

The "Questions" button is floating.
Maybe it appears differently on Android mobile.

SamGXO
Excursionist
38 3 5

WhatsApp Image 2021-08-18 at 4.19.41 AM.jpeg

Hi. I added the code.
The bottom Language button has been removed.

I still need to put the Top Language button in a dropdown menu.
I need to move the Shopify Chat button, fixed to the Footer.
Thanks for your help.

oscprofessional
Shopify Partner
16405 2444 3195

This is an accepted solution.

oscprofessional_0-1629260212281.png

button not visible

and you can set the top position by modifying this css

oscprofessional_1-1629260293915.png

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
SamGXO
Excursionist
38 3 5

Hi.
It is possible to put the top language buttons in a small drop down menu on the left side?

Thanks

Cesar
Shopify Partner
46 1 9

We've noticed similar issues on many Shopify stores where widgets from different apps float around the page, cluttering the website and disrupting brand consistency.

To address this, we recently launched our app, Powerful Floating Buttons. It helps consolidate these widgets into a single, easy-to-use panel. This creates a cleaner store layout and ensures the panel matches your brand's style for better visual appeal.

Co-founder of Not A Side Project. Some of our apps.
★ Powerful Floating Buttons: https://apps.shopify.com/floating-widget-organizer
★ Connected Inventory: https://apps.shopify.com/connected-inventory