Joomla Templates Club 406,261 posts

[dcross02 Friend dcross02Join date: December 2010Posts: 55Downloads:43Uploads:10 Thanks: 10 Thanked: 1 times in 1 posts]

#203644

I would like to have the logo image span the entire width of the web site (like a banner). Right now it gets cut off about two-thirds of the way across. I currently have this in my custom.css:

.logo-image a img {
width: 100%;
height: 100%;
}

I am using Joomla 3.3.6 and JA Social 1.1.1

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

#559001

Can you throw together a screenshot mock-up of what it is you are envisioning?

[dcross02 Friend dcross02Join date: December 2010Posts: 55Downloads:43Uploads:10 Thanks: 10 Thanked: 1 times in 1 posts]

#559003

Attached is a mockup.

---

Attachments:

1. 

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

#559004

In fiddling around with the CSS styling your current logo, I noticed that your current logo isn’t wide enough to spread across the entire header. Can you advise as to the current height/width dimensions of your logo image?

[dcross02 Friend dcross02Join date: December 2010Posts: 55Downloads:43Uploads:10 Thanks: 10 Thanked: 1 times in 1 posts]

#559007

Right now the logo is 894×200. I didn’t know what the width of the web is, so I figured I would re-size it to fit exactly once I know this is possible to do.

[dcross02 Friend dcross02Join date: December 2010Posts: 55Downloads:43Uploads:10 Thanks: 10 Thanked: 1 times in 1 posts]

#559215

I would like the logo area to look like the attached, going all the way over to the search module. Not sure how large the image should be to do that.

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#559335

Hi @dcross02,

If the logo size is around 660×75 pixels. Please open file root_folder/templates/ja_social_t3/css/custom.css and add this code then let me know if you need further assistance :

.logo-image a {
width: auto;
height: auto;
display: block;
}

2 users say Thank You to Adam M for this useful post

1. dcross02
2. TomC

[dcross02 Friend dcross02Join date: December 2010Posts: 55Downloads:43Uploads:10 Thanks: 10 Thanked: 1 times in 1 posts]

#559345

Thanks, Adam. Exactly what I needed.

[Author]

Posts