Joomla Templates Club 406,261 posts

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#186151

Hi,

I changed my logo size to 350px / 65px and I also update it on the template.css file.

when I am checking my site on my iphone the logo is not responsive.

how can I fix it?

My site link is: http://24locallocksmith.com/

thanks.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#487678

Dears Tiwebmaster,

Please use other logo image for mobile devices as m-logo.png. Then open file less/responsive-style.less and add the below code into it:

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("../images/m-logo.png");
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}

//hide sitename and slogan
span, small {
display: none;
}

}
You need change width and height value so as to be compatible with mobile devices
– Next, go to JA Mero template setting and run complie less to css method.

Hope this helps.

Regards

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#488129

by running the compile less to css it will keep all the changes I made before to the template.css file?

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#488136

I made the compile less to css….
now the image size is changing the the image source is not changing and I still see the logo.png and not the m-logo.png.

please let me know how to fix it.

thanks.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#488142

Sorry, please try to edit

background-image: url("../images/m-logo.png");
to
background-image: url("../images/m-logo.png") !important;

Run Compile Less to Css again

Regards

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#488693

thank you! that fixed it!

[mrwerner Friend mrwernerJoin date: July 2007Posts: 5Downloads:0Uploads:0 Thanks: 2]

#490119

Hi,

I have 2 logos I want to use… One large logo (logo.png) for desktop template and a smaller logo for mobile (logo-m.png)

logo.png (for desktop image size W:400px x H:40px)
logo-m.png (for desktop image size W:286px x H:80px)

I have followed the steps above and the mobile logo works but it also changes the desktop template to the mobile logo?
can I use 2 different logos? thanks Michael

STEPS:
1. I have uploaded the image logo.png via Template Manager -> theme > Logo Image. (I am using the light Mero template)

2. I copied the code below to directory less/responsive-style.less

3. Then I selected compile Less to CSS

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("../images/m-logo.png") !important;
background-repeat: no-repeat;
width: 286px;
height: 80px;
}

//hide sitename and slogan
span, small {
display: none;
}

}

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#490154

Hi Mrwerner,

No, please remove image logo at template setting http://prntscr.com/10yhtq . In this option, your site will display this logo on all devices and ignore css rule.
Then you must move m-logo.png to folder templates/ja_mero/images .

Regards

[Author]

Posts