Make Lock Screen Logo Bigger on 7.1

Site URL: https://www.afzoelle.com/extra-af

I recently switched over to 7.1 and I can't seem to find a way to make the logo on my lock screen bigger. It defaults to smaller than the lock, which isn't helpful at all.

I'm assuming I need to add code to the Lock Page Code Injection to make that happen, but I'm not sure what. Any advice would be greatly appreciated. Thank you!

Add this to Home > Settings > Advanced > code Injection > Lock Page

<style>
  .sqs-slice-image img {
    max-height: 150px !important;
}
</style>

@tuanphan Thanks the css code works!

But, now the heading on the lock screen overlaps the logo. How do I increase the padding between the logo and Heading?

Any help would be greatly appreciated!

On 5/17/2020 at 6:09 AM, tuanphan said:

<style>
  .sqs-slice-image img {
    max-height: 150px !important;
}
  .sqs-slice-body {
    margin-top: 100px !important;
}
</style>

 

Thank you, @tuanphan that worked beautifully! I sincerely appreciate your helpful tips!

...I am having this issue also, but I can't find how to access the page code injection for the lock page, so I don't know where to put this helpful code from @tuanphan. Can anyone help with this? Feels like a silly question...

2 hours ago, TCM said:

...I am having this issue also, but I can't find how to access the page code injection for the lock page, so I don't know where to put this helpful code from @tuanphan. Can anyone help with this? Feels like a silly question...

Home > Settings > Advanced > Code Injection > Scroll down to bottom

I'm struggling with this right now. I tried this code and couldn't get it to work. The logo is bigger, but overlapping the headline. I inserted the full code, including the .sqs-slice-body part that should fix this problem, but it doesn't seem to change anything.

20 hours ago, cltexan said:

I'm struggling with this right now. I tried this code and couldn't get it to work. The logo is bigger, but overlapping the headline. I inserted the full code, including the .sqs-slice-body part that should fix this problem, but it doesn't seem to change anything.

Hi. Can you share link to cover page? We can take a look

Thanks @tuanphan

The site is https://www.artifactslux.com

I've injected this code, slightly modified from yours above... 

<style>
  .sqs-slice-image img {
    max-height: 300px !important;
}
  .sqs-slice-headline {
    margin-top: 100px !important;
}
</style>

I need to increase the size of the body text as well.

20 hours ago, cltexan said:

Thanks @tuanphan

The site is https://www.artifactslux.com

I've injected this code, slightly modified from yours above... 

<style>
  .sqs-slice-image img {
    max-height: 300px !important;
}
  .sqs-slice-headline {
    margin-top: 100px !important;
}
</style>

 

Did you solve?

20 hours ago, cltexan said:

I need to increase the size of the body text as well.

 

Use this

<style>
  p {
    font-size: 30px !important;
}
</style>

Hi @tuanphan!

Thanks for the font size code. I will try that next. As for the original problem of spacing the logo/Title/body text, no, I haven't solved. When I increase the logo size, it overlaps with title and body text.

https://www.artifactslux.com

22 hours ago, cltexan said:

Hi @tuanphan!

Thanks for the font size code. I will try that next. As for the original problem of spacing the logo/Title/body text, no, I haven't solved. When I increase the logo size, it overlaps with title and body text.

https://www.artifactslux.com

Remove your code & use this new code to increase size

<style>
  .sqs-slice-image img, .sqs-slide-wrapper[data-slide-type="lock-screen"] [data-compound-type="logo"][data-slice-type="image"] {
    max-height: 300px !important;
}
</style>

@tuanphan... Worked like a charm!!! Now all I have to do is go read up on what that code you gave me is doing! Thanks so much!