Logo problem on mobile devices
-
Hi,
I have tried to solve a logo problem for weeks, but cant fix it. My problem is that the logo shows disproportionate/outstretched on mobile devices (only) Desktop and tablet works great! Check screenshots here: https://imgur.com/a/LzrYVtN
The name of the theme is Heisengard 0.2.11 and made by one.com
I have for example tried to add below into CSS, and many more codes. But nowthing works at all. Do any of you experts know how to solve this problem?
@media screen and (max-width: 767px) {
body #logo {
max-width: 90%;
display: block;
}
}Thanks in advance,
The page I need help with: [log in to see the link]
-
Strange, it don’t work 🙁
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;
}
}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 6 years, 11 months ago by
.
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
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 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
-
This reply was modified 6 years, 11 months ago by
Hi @punktcom !
Logo size for Mobile Devices Optimized Correctly!
Check Your Website > https://www.nordanaby.se/stg_eb5b4
Screen Shot > http://prntscr.com/o19ib7
My Suggestions:
* Make Your Website Colorful with Images, Content!
Thanks & Regards!
Jay -
This reply was modified 6 years, 11 months ago by
The topic ‘Logo problem on mobile devices’ is closed to new replies.