Logo problem on mobile devices

Hi @punktcom !
Try this CSS Code Below, Instead of max-width: 767px
@media only screen and (max-width: 768px) {
/* For mobile phones: */
body #logo {
max-width: 100%;
height: 100px !important;
display: block;
}
}

• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.

Strange, it don’t work ??

View post on imgur.com

https://www.nordanaby.se/stg_eb5b4/

I have tried many codes. Something with the responsive settings?

.mob-standard-logo {
width: 127px;
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
body #logo {
max-width: 100%;
height: 100px !important;
display: block;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 100%;
height: 27px !important;
max-height: 27px !important;
}

.responsive .mobile_slide_out .logo {
float: left;
top: 30px;
position: relative;
}
}

.mob-retina-logo {
height: 70px!important;
}

.mob-retina-logo, .mob-standard-logo {
height: 70px!important;
width:127px!important;
}

@media only screen and (max-width: 767px) {
.responsive #top .logo {
width: 56%;
}
}

@media (max-width: 991px){
#site-navigation .row > .module.left a {
height: 55px !important;
width: 115px;
}
}

• This reply was modified 5 years, 9 months ago by punktcom.

Hi @punktcom !
I have visited your website > https://www.nordanaby.se/stg_eb5b4/
You have code there >
@media only screen and (max-width: 480px)
#header-wrap .logo img {
height: auto;
max-height: 64px;
width: 61%;
max-width: 330px;
}
Change the below code as>
@media only screen and (max-width: 768px)
/* For mobile phones: */
#header-wrap .logo img {
height: 100% !important;
max-height: 100% !important;
width: auto !important;
max-width: 100% !important;
}
in your style.css > https://www.nordanaby.se/stg_eb5b4/wp-content/themes/heisengard/style.css
Screen Shots>
Before Code:
https://prnt.sc/o0dvdk
After Code:
https://prnt.sc/o0dw4w

• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.

Thanks Jay, I really appreciate your help! But I have probably made some beginner errors. I have places the code into custom CSS / Extra CSS and the code appears when I show the source code. See screenshot on the link below. The logo still shows stretched ??

View post on imgur.com

Hi Dude!
@media only screen and (max-width: 768px)
/* For mobile phones: */
#header-wrap .logo img {
height: 100% !important;
max-height: 100% !important;
width: auto !important;
max-width: 100% !important;
}
You should place this code in > https://www.nordanaby.se/stg_eb5b4/wp-content/themes/heisengard/style.css
in WordPress Dashboard>Appreance> > style.css
Screen Shots>
After Code:
https://prnt.sc/o0dw4w

• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.
• This reply was modified 5 years, 9 months ago by coder01.

So strange. I have made exactly as your instructions, but can’t get it work. As you can see in CSS, the code is there:

https://www.nordanaby.se/stg_eb5b4/wp-content/themes/heisengard/style.css

Hi @punktcom !
Give me your WordPress Login Credentials.
I will keep your credentials as secret and private.
Email me: [email protected]

Hi @coder01

Check mail ??

Hi @punktcom !
You have to send both Username or Email and Password?

Hi @punktcom !
Logo size for Mobile Devices Optimized Correctly!
Check Your Website > https://www.nordanaby.se/stg_eb5b4
Screen Shot > https://prntscr.com/o19ib7
My Suggestions:
* Make Your Website Colorful with Images, Content!
Thanks & Regards!
Jay

• This reply was modified 5 years, 9 months ago by coder01.