Password page layout error (mobile ver)

[suoshie]

i want my mobile password page to be same as my desktop one. I want the mobile version to have the description / email box overlapping the background image in the centre just like desktop version. I also want the background image to have darker opacity just like the desktop version.

SHOP URL: https://c1e46d.myshopify.com/collections/all

[BSS-Commerce]

Hi @suoshie

We tried to access your password page (https://c1e46d.myshopify.com/password) but could not. Currently, if you access it, it will redirect you to the home page.

Please enable store development to display the password page. Then, we can check the password form on the mobile for you. This is our store’s password page when the store is in development mode.

Looking forward to hearing from you.

[suoshie]

hi, password page has now been enabled (: Please help me

[BSS-Commerce]

Hi @suoshie

Is this the result you expected?

We have tried the CSS code on your site, please follow these steps to apply it:

• Step 1: Go to Online store => Theme => Edit code


• Step 2: Find the file “base.css”, scroll down to the end and paste the following CSS code and save the file:

/* START BSS FIX */
@media only screen and (max-width: 767px) {
    .banner__media.media {
        opacity: 0.4;
    }

    .banner__content.banner__content--middle-center.page-width {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        bottom: 50%;
        width: 90%;
    }
}
/* END BSS FIX */

I hope that it will work for your site.

[suoshie]

Hi it worked thank you. However can you tell me how to make the big black box a tiny bit transparent so that the background image can still be seen a bit?

[BSS-Commerce]

Yes @suoshie

To make the black box more transparent like this:

You just need to change the code:

.banner__media.media {
        opacity: 0.4;
    }

to:

.banner__media.media {
        opacity: 0.8;
    }

You can test from 0 → 1 with 0.1 increments. I hope that this can help you.

[suoshie]

Thats changing the opacity of the background image, i want to change the opacity for the black box that is in the centre, so that more of the background image can be seen / less covered.

[BSS-Commerce]

Hi @suoshie

To change the opening of the black box you just need to add the following CSS code:

@media only screen and (max-width: 767px) {
    .newsletter__wrapper {
        opacity: 0.5;
    }
}

• You can also experiment with 0.1 increments to suit your website. Here is the result:

[suoshie]

thank you, is there a way i can do this without effecting the text inside the box?

[BSS-Commerce]

Hi @suoshie

It seems that you turned off the password page. Please re-enable it so we can check it for you.

[suoshie]

apologies. It is now enabled again, thank you.