Joomla Templates Club 406,261 posts

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#192949

Hi
i’ve to put a logo bigger than your… is possible to make it “responsive” (i’d like that on mobile device it’s resized automatically)

Can you help me?

thanks
Luca

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515387

You could try adding the following to the respective CSS for your logo . . .


max-width:100% !important;
height:auto;


[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#515412

if i add these properties inside logo style it’s disappear

this is the css in obelisk template

.logo-image a {
background-image: url(“../../../images/logo.png”);
background-repeat: no-repeat;
background-position: left center;
width: 428px;
height: 70px;
}

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#515511

Hi Luca,

Could you post your site URL here for a closer look? also set Optimize Css in template manager to No.

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#515639

this is the url http://www.ssti.it/index.php

the optimize css option is off

thanks luca

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515641

<em>@brusamolino 402237 wrote:</em><blockquote>this is the url http://www.ssti.it/index.php

the optimize css option is off

thanks luca</blockquote>

Your site is password protected. Can you send temporary login/password via private message?

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#515642

sent in private message

thanks luca

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515643

Try This . . .

Within file path –> /site/css/style.css
at line 102, you will see the following:


#logo {
float: left;
margin: 5px 0 0;
text-align: left;
}

Try modifying as follows:


#logo {
max-width: 100%;
height: auto;
float: left;
margin: 5px 0 0;
text-align: left;
}

Save Changes — Clear Cache — Refresh Page

[brusamolino Friend brusamolinoJoin date: January 2009Posts: 273Downloads:75Uploads:70 Thanks: 56 Thanked: 10 times in 2 posts]

#515710

Sorry
but there isn’t any style.css in this site

the css file are under /templates/ja_obelisk/css/themes/sstiblutheme

and there isn’t any

#logo {
float: left;
margin: 5px 0 0;
text-align: left;
}

can you check it?

Best regards
thanks Luca

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515752

The **simplest** way is to give it a max-width of 100% – but this will mean that the full sized image is served to mobiles, so you should optimize your image as much as possible.

Running the image through http://www.smushit.com should help you to further optimize the image size.

[Juan Carlos Stauring Friend Juan Carlos StauringJoin date: September 2014Posts: 250Downloads:27Uploads:12 Thanks: 53 Thanked: 19 times in 3 posts]

#517577

Hi, I’m trying to accomplish this as well but with no success after following this thread. Here is what I tried:

to /templates/ja_obelisk/css/themes/christmas file template.css

.logo-image a {
background-image: url("../../../images/logo.png");
background-repeat: no-repeat;
background-position: left center;
max-width:100%;
height:auto;
}

help is appreciated :-[

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517583

Could you post your site’s URL here for further checking? also set Optimize CSS in template manager to No

[Juan Carlos Stauring Friend Juan Carlos StauringJoin date: September 2014Posts: 250Downloads:27Uploads:12 Thanks: 53 Thanked: 19 times in 3 posts]

#517593

Hi thank you, yes it is set to off:
http://www.vfldestinationweddings.com/

at the moment I do not have the above code on the template.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517599

First of all, please take a BACKUP of your site because my following suggest will require compiling from Less to Css which will override all current Css files in your site (except for ‘custom.css’ file)

Then opening the file: /templates/ja_obelisk/less/style-responsive.less

At approx line 304, you will see this code:


// T3 Header
// ---------
.t3-header {
.....................................
.....................................

.logo-image {
width: 110px;
height: 30px;
padding: (@T3globalPadding/4) 0;
margin-right: @T3globalMargin;

a {
background-position: left center;
}
}


change it to:


// T3 Header
// ---------
.t3-header {
.....................................
.....................................

.logo-image {
width: 100%!important;
height: auto!important;
padding: (@T3globalPadding/4) 0;
margin-right: @T3globalMargin;

a {
background-position: left center;
}
}


Then go to backend > template manager > click button Compile LESS to CSS. Let me know how it goes.

1 user says Thank You to Saguaros for this useful post

1. Juan Carlos Stauring

[Juan Carlos Stauring Friend Juan Carlos StauringJoin date: September 2014Posts: 250Downloads:27Uploads:12 Thanks: 53 Thanked: 19 times in 3 posts]

#517688

It went great, thanks that was the solution for me 🙂

jc

1 user says Thank You to Juan Carlos Stauring for this useful post

1. JA Developer

[Author]

Posts