Site logo distorted on mobile devices

Hi obsidianurbex,

We have checked this issue.For solution follow these steps

1. Go to your plugin and click on Advance Options.
2. Paste this CSS in custom CSS editor and click on a save-options button for save settings.

@media (max-width: 480px)
.logo_class img {
    height: auto;
}

Thanks.

Hi Janine,

Please apply this custom CSS code int plugins settings

Plugin Menu –> Advance Options Tab –> Custom CSS Editor

@media (max-width: 480px)
media-screen.css:107
.logo_class img {
    width: auto !important;
    height: auto !important;
}

Let us know, hope that will fix this.

Thanks

Hi

Thanks for your response, but neither of these appear to fix the issue and the logo is still “stretched” in the vertical dimension when viewed on mobile.

Hi obsidianurbex,

Please apply this custom CSS code in plugins settings

Plugin Menu –> Advance Options Tab –> Custom CSS Editor

@media (max-width: 480px)
media-screen.css:107
.logo_class img {
    width: 150px;
    height: auto !important;
}

Thanks.

https://www.dropbox.com/s/dknn3bahs49gfm2/Screenshot_20180123-095429.png?dl=0

Still distorted on my Pixel XL. Cleared browser cache as well to make sure code changes were applied.

Cheers

Hi @obsidianurbex,

Do you want same as below image?

Image URL – https://postimg.org/image/6utg217t1/

You need to modify some code in the file, check the instruction into below image:
(Do you have any coding knowledge?)

For Large Image Preview, Check This URL – https://postimg.org/image/qdy1b5tn9/

Thanks

• This reply was modified 6 years, 10 months ago by weblizar.
• This reply was modified 6 years, 10 months ago by weblizar.
• This reply was modified 6 years, 10 months ago by weblizar.

I can access the file, what lines do i delete or modify?

hi,
You need to edit file media-screen.css ( you will find it in following the path: plugins/maintenance-mode-and-under-construction-page/options/css/media-screen.css ).
In this file search “.logo_class img”, you could find it online no 107. There you will find this code

.logo_class img {
width: 300px;
height: 90px;
}

Just comment this code like this :

/*
.logo_class img {
width: 300px;
height: 90px;
}
*/

This will solve the issue. Please follow the steps. And notify us after applying the above solution.

Thank you.