Joomla Templates Club 406,261 posts

[mpitof Friend mpitofJoin date: January 2011Posts: 23Downloads:0Uploads:10 Thanks: 6]

#197769

Hi,

I am unable to change the logo height on mobile. It looks like this:

While it looks ok on a computer:

Link to site: http://batpleie.no/bv/

What I’ve done:
Added to custom.css:


.logo-image a {
width:253px;
height:137px !important;
}


Changed in template-responsive.css:


.logo-image a {
background-size: 100% 100%;
max-width: 253px;
max-height: 137px !important;
}


Changed in template.css:


.logo-image a {
background-image: url("../images/logo.png");
background-repeat: no-repeat;
width: 253px;
height: 137px;
}


Any ideas what to do?

---

Attachments:

1. 
2. 
3. 

[Radonja Djurisic Friend Radonja DjurisicJoin date: September 2014Posts: 316Downloads:180Uploads:113 Thanks: 66 Thanked: 72 times in 15 posts]

#535152

Please don’t use template.css for modification or template-responsive.css !
in future if u update template u will lose all u modify in that files

best way is to add all modification in custom.css !

please add this code in custom.css

@media (max-width: 360px){

.logo-image a {
background-size: 100% 100%;
max-width: 320px;
max-height: 137px;
}
}

and let me know

Tolja

1 user says Thank You to Radonja Djurisic for this useful post

1. mpitof

[mpitof Friend mpitofJoin date: January 2011Posts: 23Downloads:0Uploads:10 Thanks: 6]

#535183

Thank You! This really helped.

I now have another issue though. I have created the logo so that it has some pixels on the right in order to adjust correctly on the main web page. However, on mobile layout, the logo is supposed to be centered, but is now towards the right.

How do I adjust this?

I thank you for the advice regarding not using template.css or template-responsive.css for changing things –*but I don’t know how to make specific changes to responsive design / normal design without this.

And in template-responsive.css I see:


.logo-image {
margin-left: 0;
}


However, if I try to change this to e.g. -10px it doesn’t change anything.

I have tried using the advice in this thread: http://www.joomlart.com/forums/topic/different-logo-and-size-for-mobile-layout/

But it didn’t work.

[Radonja Djurisic Friend Radonja DjurisicJoin date: September 2014Posts: 316Downloads:180Uploads:113 Thanks: 66 Thanked: 72 times in 15 posts]

#535194

if u notice i add this under @media (max-width: 360px) !
that means it will aply only under 360 px
just add green code in code i already post above

@media (max-width: 360px){

.logo-image a {
background-size: 100% 100%;
max-width: 320px;
max-height: 137px;
}

.logo h1 a {
margin: 0px 0px 0px -15px;
}

}

let me know is this ok

1 user says Thank You to Radonja Djurisic for this useful post

1. mpitof

[mpitof Friend mpitofJoin date: January 2011Posts: 23Downloads:0Uploads:10 Thanks: 6]

#535195

Ah! Thank you! Works like magic!

[Author]

Posts