Login with SHOP button cutoff on Header

[NailMeHarder]

I've added the Login with Shop button to my homepage header, however the button is getting cutoff. How can I fix this?  I'm using the Refresh theme with no custom code. 

 

[Dan-From-Ryviu]

Hi @NailMeHarder 

Please share the link to your store so we can check

[NailMeHarder]

https://nailmeharderstore.myshopify.com/

[NailMeHarder]

https://nailmeharderstore.myshopify.com/ . Another thing is once someone Logs in via SHOP, the button disappears completely. Are there options for them to log out? 

[Dan-From-Ryviu]

Please add this code to Custom CSS of Header in Online Store > Themes > Customize > Header. 

@media (min-width: 750px) {
    html .header__icons .shopify-app-block { 
        max-width: fit-content; 
        max-height: fit-content;
    }
}

[NailMeHarder]

Thank you - unfortunately it didn't change the outcome. Also, I can't see the button once I log-in, not sure how to fix this.  I have to use incognito to see the button, but it shows cut-off still

[NailMeHarder · Accepted solution]

Figured it out - after trying the code provided, i received this error: <"html" does not appear to be used in this section. Try a different selector.> It seems that 

• You can’t use global selectors like html, body, or even @media queries directly unless the section supports them

• Shopify restricts this input to CSS tied to that section’s DOM tree

To re-write the code without html or Global Context, I used this code:

.header__icons .shopify-app-block {
  max-width: fit-content !important;
  max-height: fit-content !important;
  overflow: visible !important;
}

.header__icons .shopify-app-block iframe {
  width: 180px !important;
  height: auto !important;
  display: block !important;
}

 It seems to work now. 

[Dan-From-Ryviu]

Thanks for updating!