SOLVED How to position the item-overlay-title and description in Owl Showcase
-
-
- Vincent Polizatto
- Newbie
- Posts: 3
- Thanks: 0
SOLVED How to position the item-overlay-title and description in Owl Showcase
Posted 8 years 5 months ago-
Hello,
I'm using the Versla theme on Gantry 5 with Joomla 3.6.5. My question relates to the Owl Showcase.
I'm trying to position the item-overlay-title and item-overlay-description for each image so that they appear within the bottom 1/3 of the image. The intent is to create a look like this:
This image is hidden for guests.
Please log in or register to see it.
I used the following code by editing the "_owlcarousel.scss" file using FTP. Here is the code after my changes:
.item-overlay-title {
display: block;
position: absolute;
bottom: 15%;
font-family: Helvetica,Arial,sans-serif;
color: rgb(0, 102, 204);
font-size: $core-font-size + 0.5rem;
font-weight: $font-weight-regular;
line-height: $core-line-height + 1.75rem;
}
.item-overlay-desc {
display: block;
position: absolute;
bottom: 13%;
font-family: Helvetica,Arial,sans-serif;
color: rgb(0, 102, 204);
font-size: $core-font-size;
font-weight: $font-weight-regular;
}
Everything works in the desktop. However, on the mobile and tablet, the title and text are flush left as shown at the link:
This image is hidden for guests.
Please log in or register to see it.
Here are my questions:
1) How can I center the item-overlay-title and item-overlay-text on the mobile and tablet?
2) Is there a simpler way to make the changes from the Gantry back-end on Joomla rather than directly editing the files using FTP? If so, how would I do it?
3) Is there better code to achieve what I'm trying to do?
I'm a newbie, so specific suggestions and/or code would be most helpful.
Really appreciate any help and advice.
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
Re: SOLVED How to position the item-overlay-title and description in Owl Showcase
Posted 8 years 5 months ago-
Please post your URL, Username and Password in Secure Tab and i will take a look and maybe figure out what the problem is.
For posting sensitive information you hit the Blue Reply Button and then you will see Secure Tab. Post all info that is sensitive in there, only Fellow Mods, Staff and I can see that! - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Vincent Polizatto
- Newbie
- Posts: 3
- Thanks: 0
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
Re: SOLVED How to position the item-overlay-title and description in Owl Showcase
Posted 8 years 4 months ago-
Add this code in custom.scss file or Gantry Page Settings:
.g-owlcarousel-showcase .g-owlcarousel .owl-stage .owl-item .item .g-showcase-image-link .showcase-image .item-overlay .item-overlay-title, .g-owlcarousel-showcase .g-owlcarousel .owl-stage .owl-item .item .g-showcase-image-link .showcase-image .item-overlay .item-overlay-desc { left: 0; right: 0; } .g-owlcarousel-showcase .g-owlcarousel .owl-stage .owl-item .item .g-showcase-image-link .showcase-image .item-overlay { text-align: center; }
To add custom style sheet to Gantry 5 Framework please follow these instructions:
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
or if you want to add them in the Page Settings:
docs.gantry.org/gantry5/configure/page-settings#custom-css-js -
The following users have thanked you: Vincent Polizatto
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Vincent Polizatto
- Newbie
- Posts: 3
- Thanks: 0
Re: SOLVED How to position the item-overlay-title and description in Owl Showcase
Posted 8 years 4 months ago-
Damir,
Thank you! That fixed it. Really appreciate you stepping in to help me.
Have a great day!
Vince - Last Edit: 8 years 4 months ago by Vincent Polizatto.
-
Time to create page: 0.056 seconds