Public Forums 71,145 posts

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#189682

hello
i work with t3 v1.4 it’s great but logo isn’t resize on my phone ??
http://legribouillard.com/newgribou/
thanks for any help

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#502169

Default T3 Blank template doesn’t support logo to be responsive but you can do that this way

Open templates/t3_blank/css/custom.css file

From

.logo-image a {
background-repeat: no-repeat;
height: 200px !important;
width: 651px !important;
}


Change to

/* mobile*/
@media (max-width: 767px) {
.logo-image a {
background-image: url(../images/logobleuetvert_mobile.png) !important;
background-repeat: no-repeat;
height: 100px !important;
width: 251px !important;
}
}

/* tablet*/
@media (min-width: 768px) and (max-width: 979px) {
.logo-image a {
background-image: url(../images/logobleuetvert_tablet.png) !important;
background-repeat: no-repeat;
height: 150px !important;
width: 451px !important;
}
}

/* fullsize*/
@media (min-width: 1200px) {
.logo-image a {
background-image: url(../images/logobleuetvert.png) !important;
background-repeat: no-repeat;
height: 200px !important;
width: 651px !important;
}
}

Remember to change width and height match with logo size device.

1 user says Thank You to Ninja Lead for this useful post

1. pardus

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#502242

hello thanks !!

why i can’t use % ?

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#502263

I typically make these changes in the style-responsive.less file rather than in the custom css. I adjust my screen and use a firefox plugin so I can see the resolutions that I’m at and follow when the logo “breaks”. Then I add something for the @media as above and do .logo a {background-size: 75%;} or whatever % is needed to unbreak it for that resolution.

I just use the .less file because that’s where the responsive stuff already is, so I just use it there. The % seems to work fine as a background size for my needs.

Hope that helps – always many ways to approach these things.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#502568

strange to dosen’t include this on basic template not ?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#502627

With my solution above will help you make responsive the logo site.

<blockquote>
{background-size: 75%;}
</blockquote>

%: only resize image to match specific screen resolution but no change in capacity image

[Author]

Posts