How to fix my password page on desktop when toolbar is shown.

[billonmaison]

Hello

I notice when my web browser bar is always visible, the email signup section and the hyperlink that says "are you the owner of this site" are overlapping. When I hide my web browser bar it reformats automatically and looks nice. Is there anyway to make the password page so that way even when I don't have my web browser bar hidden the two sections won't overlap? I've included screen shots of what it looks like with the web browser bar hidden and without the web browser bar hidden.  

[billonmaison]

Url: billon.maison

[Iwillsolveit]

To address the overlapping issue on your password page when the web browser bar is visible, you can adjust the CSS styling to ensure the sections stay separated, even when the viewport height is reduced due to the visible browser bar. Here's what you can do:

1. Adjust the padding and margin for the email signup section and the "store owner" hyperlink. This will ensure that these elements don’t overlap when the space changes.

2. Use the min-height or vh units to ensure that the elements are spaced correctly no matter the browser window size. The vh (viewport height) unit can be useful because it dynamically adjusts based on the visible height of the browser window.

Here’s an example of how you can modify the CSS:

/* Adjust the minimum height for the page */

body, html {

    min-height: 100vh; /* Ensures the page takes up the full visible height */

    box-sizing: border-box;

}

/* Styling for the email signup section */

.signup-section {

    margin-bottom: 2rem; /* Adds spacing to the bottom to prevent overlap */

}

/* Styling for the "Are you the store owner" link */

.store-owner-link {

    position: relative;

    bottom: 1rem; /* Adjust this to move the link up or down as needed */

    padding-bottom: 1rem; /* Extra space to avoid overlap with the signup box */

}

/* Ensure sections do not overlap when the browser bar appears */

@media screen and (max-height: 700px) {

    .signup-section, .store-owner-link {

        margin-bottom: 3rem; /* Increase space when viewport height is small */

    }

}

How to Apply:

1. Open your Shopify theme customizer.

2. Go to Edit code.

3. Look for your password page’s CSS or the relevant sections in the theme's main CSS file.

4. Add or adjust the CSS as shown above, especially focusing on the signup-section and store-owner-link classes (you may need to adjust the class names based on your theme's structure).

This should prevent the overlap even when the browser bar is visibl

e. Let me know if you need further help with this!

[billonmaison]

Hello! I forgot to say that I am using the Origin theme. Do you know how each of these parts that you mentioned are named in the origin themes code?

[Iwillsolveit]

Unfortunately no