Return to previous page

Logo looks blurry and there are some offsets on site pages

This topic has 14 replies, 3 voices, and was last updated 3 years, 1 months ago ago by Rose Tyler

Dash

Participant

December 19, 2021 at 13:14

Hi, I have not do anything on the website, but some problems occur: logo looks blurry on mobile.
There are some offsets on my home page:
https://gyazo.com/72ae3b132547efe0a3c07ab47c617b2d
https://gyazo.com/cc34be79e4de2b7ddeb2bfcdcdd49287

on shop page
https://gyazo.com/26ae16fcbf2fe4d77c8b2298b24ffe22

And in mobile version also
https://gyazo.com/a854fbe4f5f2f84b6d9ee0b8e51f93ad

I know that previously all this pages looked perfect.
Why does it happen and how can I stop this offsets appear?

Also the site puts a lot of load on the server (CPU Usage). Could You help to solve this problem?

#312488 Copied Theme version: 5.8.2

13 Answers

Olga Barlow

Participant

December 20, 2021 at 14:37

Hello,

1) Set product title limit – 2 lines https://prnt.sc/23pnyua Check the product alignments now.

2) Banner hover effect “Slide right” increases the width of the banner image and it causes a difference if other banners use another hover effect. So, I changed Slide right to Zoom effect. Check now.

3) What exactly is wrong with the mobile version? I don’t understand problem here https://prnt.sc/23po6qz

4) Contact your hosting provider and ask them about reports of the queries that use a lot of CPU on your site. Provide us with these reports to find out what exactly is the reason of the issue.

Regards

#312566 Copied

Dash

Participant

December 21, 2021 at 17:23

1) Thank You. Now the banners look ok

3) https://gyazo.com/9280d32503758d263ea5c5e382810554
about mobile version

4) Here is the answer from our server support:
57Hello,

We recommend that you check your running process to see which programs are consuming the most resources. You can view this by running the top/htop command. Subsequently, Killing these process (‘kill’ command) should return your VPS to normal performance.

Please consider the following:

To do CPU (computational) monitoring, these commands are worthwhile.

# Takes ten CPU measures over the course of 2 minutes. Reports the breakdown of overall CPU usage into categories on the right side.

vmstat 10 12

# Shows the top ten CPU-using processes by their current/instantaneous CPU usage.

ps -A -o pcpu,ppid,tgid,comm | sort -k1 -nr | head –lines=10

# Displays the ten highest CPU using commands based on their entire lifetime.

ps -A -o cputime,ppid,tgid,comm | sort -k1 -nr | head –lines=10

Please contact administrator
for this information.

#312708 Copied

Olga Barlow

Participant

December 21, 2021 at 19:10

Hello,

3) Are you just resize the browser or looking from real device? Because if you just resize the browser window then you need to reload the page after resize to apply mobile styles and functions.

4) We can’t do the mentioned commands from theme side. You need to do this from the cPanel or using ssh access to your site. So, we need just screenshot of the results of these commands.

Regards

#312731 Copied

Dash

Participant

December 23, 2021 at 15:27

Olga, You are right, the mobile version now looks ok, except for the logo.

https://gyazo.com/19dca96cdde1022e8fad10d31d22fcfa
https://gyazo.com/3b3edd6d69e2ef722430c1134b987209

#312977 Copied

Olga Barlow

Participant

December 23, 2021 at 15:40

Hello,

We can do nothing with the logo image. We would recommend you to use image of better quality.

We’ll be waiting for the results.

Regards

#312981 Copied

Dash

Participant

December 24, 2021 at 13:59

Ok, Olga, I’ll try. Thank You

#313047 Copied

Olga Barlow

Participant

December 24, 2021 at 15:37

Hello,

You are welcome.

Regards

#313054 Copied

Dash

Participant

December 30, 2021 at 13:38

Olga, I have uploaded the best quality and set the logo width 165 both for mobilу and desktop. But still the logo on mobile looks blurry. What else can I do?

#313436 Copied

Olga Barlow

Participant

December 30, 2021 at 14:30

Hello,

Create image 332 px width. Don’t recommend you to use odd width for the images because that 1 px causes issues as a rule during resizing.
And maybe even provide us with your PSD or Figma project where you created your image. We’ll check it in more detail.

Regards

#313439 Copied

Dash

Participant

December 30, 2021 at 15:38

I create my designs in Canva.
I have created an image with 332 px width and set 332 width for mobile and desktop.
Now the desktop logo looks blurry and the logo in mobile is perfect!

#313449 Copied

Olga Barlow

Participant

December 30, 2021 at 17:17

Hello,

Go to header builder settings and set the logo width to 166px instead of 165.

Regards

#313456 Copied

Dash

Participant

December 31, 2021 at 14:14

Now it’s ok. Thank You. Is there a way to make the logo bigger on a desktop version?

#313519 Copied

Rose Tyler

Support staff

January 2, 2022 at 08:48

Hello,

You’re welcome!
We can’t login – https://prnt.sc/25o2jeq
You can change the width of the logo element into the header content area of the Header Builder, for example – https://gyazo.com/67cc354d553bd5e069b496de5a50445e

Regards

#313545 Copied
Tagged: best selling, blurry, logo, offsets, themes, woocommerce
Viewing 14 results - 1 through 14 (of 14 total)