Change the hight of the mobile bar created in Superior Mobile Experience app by Drift Commerce

Store Design
1

Hi guys,

My issue seems to be very specific but I hope someone encountered it before and found a solution:)

I created a mobile bar menu in the Superior Mobile Experience app by Drift Commerce. I really like how it looks but I ended up facing a bit of a problem with the height of the mobile bar block itself. It already is pretty large on the vertical mobile view itself but when it gets gigantic when I turn the phone horizontally. Thus, the view of the page is getting blocked by this chunk of the menu. I was wondering if there’s any way to alter its height in code and make it both look more aesthetically pleasing and user-friendly.

The website is bentoli.nl

Password: ahghia

2

Hi!

The thing causing the issue is the alignment of the 0 (shown below)

example.png

if you remove the following line of code, you will lose the 0 but it will fix your alignment issues:

0
3

Could you please suggest what device you use? I haven’t noticed this issue while testing before and I need to see how repeatable it is. Apart from it, the issue I have is more about how high the mobile bar itself is, especially, on the tablet devices (view the attached screenshots).

P4oKE4056lU.jpeg
P4oKE4056lU.jpeg2560×1183 232 KB

4voYlMkrTxM.jpeg
4voYlMkrTxM.jpeg856×1852 170 KB

4

That’s just how it looks on inspect element via web browser.

To altar the height, you will need to find this section of code in the style area for that menu:

@media only screen and (max-device-width: 640px)
.sme-sb {
    width: 100vw;
    z-index: 200000000000000;
    display: block;
    background-color: var(--sme-sb-bg-color);
    color: var(--sme-sb-text-color);
    /* padding: 0.5em; */
}

you should then replace it with the following:

@media only screen and (max-device-width: 640px)
.sme-sb {
    width: 100vw;
    z-index: 200000000000000;
    display: block;
    background-color: var(--sme-sb-bg-color);
    color: var(--sme-sb-text-color);
    /* padding: 0.5em; */
    height: 17vw;
}

Altering the height value in this new code will allow you to adjust the position of the menu.

5

Thanks, it helped for the mobile. As for the tablet, it seems like it’s not just the height but the size of the icons themselves that’s causing an issue. Is there any way to change it as well?

6

Hi!

you would need to make another [email removed] media query, one for ipads, one for phones, can copy the below:

@media only screen and (max-device-width: 480px)
.sme-sb {
    width: 100vw;
    z-index: 200000000000000;
    display: block;
    background-color: var(--sme-sb-bg-color);
    color: var(--sme-sb-text-color);
    /* padding: 0.5em; */
    height: 17vw;
}

Change the value in this one to change the mobile view height, change the original to change the height for iPad/tablets

7

The height now seems to be perfect in terms of its proximity to the bottom of the page which seems to be what this code does. However, as the icons get larger when the phone is turned horizontally, so does the proportion of the bar height. Do you think there’s any way to change the icon size as well?

8

I can’t seem to get the buttons to appear when I inspect element, but try this:

find this code in the style area for the bar:

.sme-sb-ic-i {
    min-width: 20%;
    text-align: center;
    width: 100%;
}

and replace it with:

.sme-sb-ic-i {
    min-width: 20%;
    text-align: center;
    width: 100%;
    max-width: 20%;
}