Blurry header logo in password page of Debut Theme

nanaschmitz
New Member
2 0 1

Hi there,

I am new here and have searched the forum and online regarding this topic, but haven't found the solution, maybe you can help.

I am using the Debut theme. On the Password Page https://kimoberlin.com/password the logo doesn't appear as sharp as it actually is.

In the header of the theme itself, it does appear crystal sharp though.

Is there specific regulations for password page?

I have tried uploading 1080 width, a square version, 300px width.... not sure what else to try?
Inside the online store theme editor, I am sizing it to 300px width, which is the width I'd like it to show.. sharp :)
I hope you can help me!
Nana

Replies 24 (24)
chelsea1powell
Tourist
4 0 1

Hi Alex,

 

I did what you recommended to help with the blurry logo in my password page but it didn't do anything. My logo is also blurry on my header page but it's worse on the password page. Can you help me? My link is www.sonnyboyco.com

 

Thank you

thuffam
Tourist
4 1 2

While removing the lazy loading functionality appears to work, it does not address the fact that there is a bug in the lazy loading functionality. 

This feature works by first loading a low-quality version of the image (so the page loads quickly) then load a higher quality version of the image in the background.  The issue is that it is not loading the high quality image successfully.  So by removing the lazy loading software you will force the slowest page load possible (which isn't really an issue on the password page).

I have tried to debug it myself, but, interestingly, when I turn on Developer Tools in the browser (Chrome and Brave) Lazy loading starts to work properly - so I cannot see what error is being thrown.

It would be great if the Shopify support/developers would chime in and/or simply fix the issue.

Regards

Tim

Gaijin
New Member
1 0 0

@Alex_Borodin while this works I noticed that on my mobile device Galaxy S9 ( chrome ) the password page would show up zoomed in

dowblabber
New Member
2 0 2

This did fix the pixelation issue I was also experiencing, however, my logo now appears with a light grey box that extends the width of whatever screen I am viewing on. Any ideas?

sashajasmine
New Member
1 0 0

Hi,

I copied this exact code and pasted it into the right place and the image is no longer blurry, but now the width of the area where the image is to be placed is grey, I even redid the whole process to make sure I hadn't messed it up. Can you help me find a solution to this?Screenshot (24).png

kimf236
New Member
1 0 0

I am having the same issue, replaced the code, but now a light gray box appears behind my logo. Any fixes?

suyash1
Shopify Partner
3718 408 610

@kimf236 - can you please share your website link? may be logo background is grey hence that box, I can check 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
urbnsage
Tourist
8 0 5

If anyone is still having this issue, you'll actually want to change your data widths to "[1080, 1296, 1512, 1728, 2048]"

Here's how to do it:

1) Go to sections > password-header.liquid

2) search for 

data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
Copy

 3) change the widths to be "[1080, 1296, 1512, 1728, 2048]"

So your code should now look like: 

data-widths="[1080, 1296, 1512, 1728, 2048]"
Copy

 

Hope this helps!!

melissaz
New Member
1 0 1

@urbnsage 

^^^^ This answer is the easiest and best solution! ^^^^

Thank you!

Cycc
Tourist
5 0 2

Solved the problem in 1 min! Thank you!