Public Forums 71,145 posts

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#979765

Joomla 3.6.3
Purity iii 1.1.7
T3 Framework 2.6.1
JA Masthead Module

I recently (Oct 2016) purchased and installed JA Masthead in an effort to ease the insertion of a background image in the Masthead position. All seems to work well except for the size of the image? I’d like to insert an image that’s about 2" vertical and covers the entire horizontal area left to right.

The image I select does display, but only partially. About 3/4 of an inch vertically, and only 70% of the total screen width horizontally. Any help would be greatly appreciated.

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#979879

Hi can publish a link of your site here , so that i can take a look on masthead image .
Use same size of images in the masshead so that the it will show the same view for all images in different menu.

1 user says Thank You to Pankaj Sharma for this useful post

1. frioman

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#980106

HurricaneContacts.com
The site is live; therefore, I can’t leave the background image up. You can see by the attached JPG that the image doesn’t fill vertically or horizontally.

---

Attachments:

1. 

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980377

Hi
There is no image showing in the Masthead : http://prntscr.com/cyztug
I can only found the text and slideshow below it . can u give me direct URL where image is showing in the masthead .

1 user says Thank You to Pankaj Sharma for this useful post

1. frioman

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#980427

http://www.hurricanecontacts.com/index.php/accessories Here is one page that I posted so you can see.
I hope to fill the space with my background image (about 2 1/2" vertical and full width horizontal).
Thanks for the help.

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980437

Hi
Add below code to make the masthead 100% width

.ja-masthead .ja-masthead-detail { max-width: 100%; }
.page-masthead .container {width:100%}

Your image size is smaller in width and height so it showing like this , I suggest you use large width image .
For example 1350×100 .

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#980439

OK. I’ll give it a try. Do I create a custom.css file in modules/mod_jamasthead and place the code in that file? Or…where do I place it?
I need an approximately 200 pixel (vertical) image, and I will increase the width to 1350 pixels.

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980443

Hi
add the code in /css/custom.css file in template folder .

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#980580

I added the code and replaced the image with new size of 1350 pixels X 200 pixels. The code partially worked! The image now displays across the entire width; however, the image is only partially visible vertically.

You can see the live page here http://www.hurricanecontacts.com/index.php/accessories

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#980753

Hi
Add add below code in custom.css file to fix this

.ja-masthead-detail{ padding:90px 0!important}

save and check.

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#981058

More progress. Thank you. It’s much better. Now all that remains is how to eliminate the large void space above and below the Masthead image. Please see attachment. http://www.hurricanecontacts.com

Site is live, so you can see what I mean. Thank you.

---

Attachments:

1. 

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#981198

Hi
Add below code in custom.css file to remove the padding

@media screen and (min-width: 992px){
.page-masthead .row-feature {
    padding-bottom: 0px!important;
}
}

1 user says Thank You to Pankaj Sharma for this useful post

1. frioman

[frioman Friend friomanJoin date: December 2011Posts: 66Downloads:5Uploads:13 Thanks: 24]

#981635

A BIG thank you. That worked!

Fernando

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#981893

You are welcome !

[Author]

Posts