Captions not working in Joomla 3
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
The non-caption image, center, doesn't center because pull center just does nothing how you use it.
That's an inline element and so you need to put that in an element with text-align center on it.
margin-left/-right only works if you set a dimension for the element.
Firfox has a long outstanding bug that max-width does not work correctly inside a table.
You set figure to to display:table so that cant work either unless Firefox get fixed.
Anyway seems like there is the need fix captions. I will set up a ticket so the devs can fix this.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
a (lame) fix for the non-responsive images would be to add
@media only screen and (max-width: 480px){
figure img {width: 100%}
}
to your css -
The following users have thanked you: Laurie McArthur
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
G'day Henning!
I put the code in exactly as you have it. I'm doubtful that's what you meant. Would you please confirm.
@media only screen and (max-width: 480px){ figure img {width: 100%} }
This look more like it?
@media { max-width: 480px; } .figure img { width: 100% }
Thanks,
Laurie. - Last Edit: 9 years 11 months ago by Laurie McArthur.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
in your example the img.pull-center
needs also a
img.pull-center {display: block;}
in the css -
The following users have thanked you: Laurie McArthur
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
OK, thanks Henning!
I'll fix that and get back.
Thanks
Laurie.
-
-
-
- Laurie McArthur
- Newbie
- Posts: 14
- Thanks: 1
-
Hi Henning and others!
Something worth mentioning.
I had the captions and responsive behaviour working correctly in all browsers and devices.
According to my responsive simulator in Firefox, most of the responsive sizes went up the spout with the image not resizing from it's full width.
By resizing the browser in FF, IE, Chrome, Safari and Opera, I found the problem existed in FF and IE. I guess there has been an update in each of those browsers that's not rendering the code correctly.
I added FF to my small tablet and confirmed the problem.
Long story short - I added the following code to my gantry-custom.css file and it came right:
@media only screen and (max-width: 800px){ figure img {width: 100%} } @media only screen and (max-width: 1200px){ figure img {width: 100%} }
I reckon it's about time the Rockettheme people added this code, as well as the other code given to me by Henning, to the Gantry template.
This has taken me a lot of time to get right. I suspect it would beat a beginner.
I hope this addition will be helpful to others.
Regards,
Laurie. -
The following users have thanked you: Branka Marinkovic
-
Time to create page: 0.056 seconds