Customer Account Login page Padding (Expanse)

[saraki]

Hi

I added the following code which works everywhere but on pages with forms and the account login page.

.page-width {
width: 100% !important;
max-width: 90% !important;
}

I was able to adjust the width of the contact form, but there is no CSS field for the account login page...

I want to add padding to reduce the width, it looks like this right now spanning across the entire pade: 

 

Also, the Email and Password fields are invisible. When clicked, a black border shows up. 

I would like the border to be visible at all times and change its color to look like this:

 

www.inibo.co

password: secret

Thank you!

[TerenceKEANE · Accepted solution]

Actually, the solution you've implemented is generally correct, but you might encounter issues in such cases. That is, you need to create a specific situation for the page. Anyway, would you mind trying the following code? I wrote it for the login page. It's also a good idea to check for conflicts in other parts of the site. The '#656262' in the border section is a color code. You can use the Eye Dropper extension in Chrome to grab the color code you want and paste it here. With a few trial and error attempts, you'll figure it out.

@media (min-width: 991.98px){
    .page-width.page-width--tiny.page-content > .section-header {
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .page-width.page-width--tiny.page-content > #CustomerLoginForm {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

[TerenceKEANE]

Hello!

You seem to have mixed things up a bit. Firstly, could you remove the code you added? The code you added works globally. If adding code within a <style> tag is supported in the page structure, custom codes can be added there. However, platforms like Shopify often limit extensive customization. Apart from that, the following code will solve the border issue. Also, could you clarify the exact purpose of that code?

.input-full {
    border: 1px solid;
}

input.Polaris-TextField__Input {
    outline: 1px solid #656262!important;
}

[saraki]

Hi @TerenceKEANE

I like that it works globally. The reason why I added this code is because sections with columns and featured collection sections were too narrow compared to other sections that display page-wide.

Now I just need a code to counteract this for forms, faqs and the login page. 

Thank you for the input border code. The borders are there now but they remain black no matter what color I enter.
Any idea why that is?

Thank u

[TerenceKEANE · Accepted solution]

Actually, the solution you've implemented is generally correct, but you might encounter issues in such cases. That is, you need to create a specific situation for the page. Anyway, would you mind trying the following code? I wrote it for the login page. It's also a good idea to check for conflicts in other parts of the site. The '#656262' in the border section is a color code. You can use the Eye Dropper extension in Chrome to grab the color code you want and paste it here. With a few trial and error attempts, you'll figure it out.

@media (min-width: 991.98px){
    .page-width.page-width--tiny.page-content > .section-header {
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }

    .page-width.page-width--tiny.page-content > #CustomerLoginForm {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

[saraki]

Thank you @TerenceKEANE 
It's working! 

But I still have two issues:
The border color remains black. I put #dbdcdd which is a light gray gray and the borders still come up black.
I just saw that the borders are invisible on mobile. Could you please send me the @media version for those as well?

Thank you so much!

[saraki]

Oh and.. another conflict are the collapsible faqs...

Do you have a code to make those more narrow as well, for both desktop and mobile?

[TerenceKEANE · Accepted solution]

you are welcome. 

Below codes work on both mobile and desktop. I've changed the border color now. There is no problem with login and return parts. Exactly where does the border not appear?

.input-full {
    border: 1px solid #dbdcdd!important;
}

input.Polaris-TextField__Input {
    outline: 1px solid #dbdcdd!important;
}

[saraki]

Thanks, that fixed it 🙂 but it's working only on desktop... 

Mobile, on both forms and the account login page there are no borders, with black on hover...

I actually still have a lot of issues on mobile..... 'cries'

[TerenceKEANE]

I'm glad it worked for you. I'm still looking into it, but I don't have any issues on mobile either. Maybe there is a cache issue? If you want, try from another browser or in a incongito window and reset the site's cache if available. If there are any other issues, feel free to tag me when you open a topic; I can help when I have some free time from software work. Also, regarding the border issue, the following will only work on mobile. Feel free to give it a try!

@media (max-width: 991.98px){
 .input-full {
    border: 1px solid #dbdcdd!important;
}

input.Polaris-TextField__Input {
    outline: 1px solid #dbdcdd!important;
}
}

[saraki]

Good morning @TerenceKEANE 
It's working now, my bad.. I forgot to add the second one of these:  }
Thank you SO much for your help! 

Would you also be able to help me with my collapsible content, like faq sections and product grid filters?

I have two pages where I am using faq sections that need to be more narrow, not 100% width. 

In my global settings I set the "collapsible triggers" and "collapsible content" to 50%. On desktop this works great on the faq sections but unfortunately it affects also all product grid filters which are now too narrow.

Is there a code for just the product grid filters that I can add to my global css codes to adjust their width site-wide? 
Or perhaps there is a better solution all-together? 😭

I would also like to remove the product count in all product grid filter sections.

[TerenceKEANE]

Good Morning 🙂

glad to hear that.  My code always works because I test it on your browser before sending it to you 😊

But the most important thing here is to easily implement this in the software you use. Website developers sometimes opt for the easy way out by making everything global. In fact, there should be additional things specific to each page, but unfortunately, in the software you're using, the situation is like this. Of course, it's possible to solve this somewhat through trial and error. Now, the code below will fix the border issue I saw in the drop-down section of the FAQ page. Would you try adding it if this is what you want? Or it could be another style. Also, it would be good if you could provide the exact link to the page where the code will be added. The code for the FAQ page is as follows:

https://inibo.co/pages/stockists   

button.label.collapsible-trigger.collapsible-trigger-btn.collapsible-trigger-btn--borders.collapsible--auto-height {
    border: 1px solid #dbdcdd;
    padding-left: 7px;
}
.collapsible-trigger__icon {
    right: 15px!important;
}
.collapsible-content__inner.rte {
    padding-top: 15px;
    font-weight: 600;
}
.collapsible-content__inner.rte > p {
    border-bottom: 1px dotted;
    padding-bottom: 5px;
}
.collapsible-content.is-open {
    overflow: visible;
}

You mentioned Grid? I believe those are the pages like the one below? If so, I've added borders here as well. Additional enhancements can still be made. The design looks good as I've seen, but small touches are necessary for the overall software. The codes :

https://inibo.co/collections/ulltimate-gifts

.collection-grid>.grid-item {
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #dbdcdd;
    border-radius: 5px;
    padding: 20px;
};

What exactly did you want in the Filters section? Would it be just a single line like the one below? If so, could you please try the following code? It needs to work globally.

button.collapsible-trigger.collapsible-trigger-btn.collapsible--auto-height.is-open.tag-list__header + .collapsible-content.collapsible-content--all.is-open {
    width: auto;
}

Also, could you provide the exact links to the pages where the conflicting codes were added? For example, if I send you a code and it works but causes issues on a different page, providing the links to both pages with the conflicting code would help us quickly resolve the issue. Additionally, if possible, could you point out the relevant sections in images? 😊

best regards,

[TerenceKEANE]

Hello again,

I'm glad my codes worked for you. Actually, I had written the answer, but somehow it wasn't added here. I'm writing to you for the second time.

You can solve some of the issues I saw on the following page with the codes I wrote for "FAQ sections.

https://inibo.co/pages/stockists

button.label.collapsible-trigger.collapsible-trigger-btn.collapsible-trigger-btn--borders.collapsible--auto-height {
    border: 1px solid #dbdcdd;
    padding-left: 7px;
}

.collapsible-trigger__icon {
    right: 15px!important;
}

.collapsible-content__inner.rte {
    padding-top: 15px;
    font-weight: 600;
}

.collapsible-content__inner.rte > p {
    border-bottom: 1px dotted;
    padding-bottom: 5px;
}


.collapsible-content.is-open {
    overflow: visible;
}

The grid page looks a bit better with border and padding. You'll see when you add the following codes.

grid page such as 

https://inibo.co/collections/9k-solid-gold

.collection-grid>.grid-item {
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #dbdcdd;
    border-radius: 5px;
    padding: 20px!important;
};

I also added some things to the 'Grid filter' section. I provided CSS specific to it. There shouldn't be any conflict.

button.collapsible-trigger.collapsible-trigger-btn.collapsible--auto-height.is-open.tag-list__header + .collapsible-content.collapsible-content--all.is-open {
    width: auto;
}
button[data-collapsible-id^="filter"] {
    width: 100%;
}

After trying the above suggestions, if there is any conflict, could you please detail which code and between which pages it occurs, and share a screenshot or video? We can solve this issue using attributes or different methods, which is a more difficult way than using HTML classes. Just try the above suggestions and write down any issues that occur in detail.

We've hardly encountered any problems we couldn't solve over the years. While Shopify has a solid foundation, the theme you're using is limited in most custom cases. Beyond that, it relies on manual work. As long as you provide detailed descriptions, there's no problem we can't solve. Also, don't forget to tag me if there's another issue😉

[TerenceKEANE]

hello,

I think there's a character limit on the topic, so I sent a message. Let me know if you open a new topic 😉

[saraki]

Hi @TerenceKEANE 

Looks like I have a lot to do today, thank you so much! I will go through these messages and pm you.

[TerenceKEANE]

Hello,

Yes, as you said, there's a lot of work. Let me know if you need anything 😉