Recent
Categories
View Replies (15)

Setting default height for ImageLinkHover modules

0
Votes
Undo
  1. smbluest
    smbluest
  3. Commercial Templates
  4. Wednesday, 13 August 2014
  5.  Subscribe via email
Hi,

I am using the Nocturne template with Joomla 3.2.3. I am using the ImageLinkHover module for several image links on the Home page of my site. When the text is not exactly the same in each "box" (module), the heights differ. I have only been able to get a uniform height by adjusting the image sizes accordingly.

What I would like to do is have the same image dimensions for each box but always have the boxes be the same height no matter how long or short the description text is. Is there an attribute I can set to make the module heights the same?

Thank you in advance.

Regards,
Sheri
Responses (15)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Sheri

Would you have a URL to an example of your ImageLinkHover modules so we can examine this issue further?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

I've responded by email to your request.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Sheri

To set a min height to your ImageLinkHover modules try adding the following to the Custom CSS field of your templates parameters (editing to your taste)..


.j51imagelinkhover > p {

    min-height: 120px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
That did the trick! Many thanks for your quick response!
  1. more than a month ago
  2. Commercial Templates
  3. # 4
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi!

Now the imagelinkhover heights are great for full-screen but they are not uniform on a tablet. Could you please provide CSS for forcing the same height for all of the boxes on a tablet?

I tried:

@media only screen and (max-width: 767px) {
.j51imagelinkhover h3 {
font-size: 11px;
}}

but I think that I need the code to change the TITLE font size so that Backcountry Scouting will fit on one line. Thank you! I will send the login information to you in an email message.

Thank you!
Regards,
Sheri
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Sheri

Would you have a URL to an example of yoru ImageLinkHover modules?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry... I got it :)

Could you try adding the following to the Custom CSS field of your templates parameters....


@media only screen and (max-width: 767px) {

.j51imagelinkhover > p {

    min-height: 230px;

}

.bottom-1 h3 {

    font-size: 18px;

}}


The first part of this sets the min height of the module. Due to narrow width the height has to be extended to accommodate all the text. And the second part sets the title to keep it on one line.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

I've added the following to the CSS:

@media only screen and (max-width: 767px) {
.j51imagelinkhover > p {
min-height: 250px;
}
.bottom-1 h3 {
font-size: 11px;
}}
but the ImageHover titles don't seem to be adjusting on the iPad (in portrait orientation). The Backcountry Scouting title is still too long and is making the box longer than the others. Any ideas?
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Try extending the max-width of your media query to 959px...


@media only screen and (max-width: 959px) {

.j51imagelinkhover > p {

    min-height: 230px;

}

.bottom-1 h3 {

    font-size: 18px;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

I just tried that out and changed the title font size to 12 but that didn't seem to change anything on the iPad. Actually what I do notice is that the titles of the first row of imagelinkhover boxes has been resized but not the second row. So we are getting closer.
  1. more than a month ago
  2. Commercial Templates
  3. # 10
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I think I figured it out. I changed your CSS to:

.bottom-2 h3 {
font-size: 18px;
}}

and that worked to change the titles on the second row of ImageLinkHover boxes. I think it's good now.

Thank you for all of your help!
  1. more than a month ago
  2. Commercial Templates
  3. # 11
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

Sorry about this, but the fix looked ok on my computer with re-sizing the screen to iPad dimensions but when viewed on an iPad, the titles in the ImageLinkHover boxes are not being resized. I have attached a screenshot of the issue in question from an iPad.

Your login info remains the same.

Thank you,
Sheri
  1. more than a month ago
  2. Commercial Templates
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Sherri

What is the first line of the CSS you are using to edit your h3 text?

Eg.
@media only screen and (max-width: 959px)


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 13
smbluest
smbluest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

I have tried both @media only screen and (max-width: 959px) {
and @media only screen and (max-width: 768px) {

neither seems to be working to change the font size of the titles.
  1. more than a month ago
  2. Commercial Templates
  3. # 14
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest the following article which details the CSS media query needed for each device. This should help you in focusing the CSS to the devices of your choice. Simply replace the '/* Styles */' with your CSS (.bottom-2 h3 {... )

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 15
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok