Flexislider : how to display the whole image
-
-
- Gerber Theo
- Rocketeer
- Posts: 68
- Thanks: 0
-
Hello,
On the following site:
The home page scrolls images using a GANTRY 5 module and the Flexislider particle.
The original images have a format of 1200 x 720 px (ratio 5:3) but Flexislider does not display them entirely.
How can I change this particle to display the complete image?
The advantage of Flexislider: this particle allows to display an Overlay image: here the logo of the choir.
Your Access -> Administrator: rt-access / password: rt-help17
Thank you in advance for your information. - Théo Gerber
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
The images are used as background images in the flexslider so it's not the image that drives the height but rather the textual content (and the padding around it) - you don't have any text so you just need to increase the padding.
Use this code...
.g-flexslider-slideshow .g-flexslider-slideshow-item-content { padding: 21rem 4rem; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. -
The following users have thanked you: Gerber Theo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Gerber Theo
- Rocketeer
- Posts: 68
- Thanks: 0
- Thank you very much. With this code the display is correct ... on Firefox and Chrome but unfortunately not on Safari? Why? Other custom.scss changes I've made in the past have never displayed a difference in display between browsers. Strange.
- Théo Gerber
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Safari on what device? what version?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Gerber Theo
- Rocketeer
- Posts: 68
- Thanks: 0
-
So, I was able to fix this problem of display Firefox (V 51.0.1) and Safari (V 10.0.2). An old code from the custom.scss file interfered.
1. However, everything is not yet perfect on the my iMac screen. The photo is not displayed "responsive". On a narrow screen, Ie see only a part of the images and on an iPad or an iPhone, the logo (ESPACE CHORAL) is centered in the top of the image.
2. I wonder if it would not be easier to use RokGallery to scroll the images in this section (Showcase - XENON template) of the homepage. It would then be necessary for me to be able to display the logo in the upper left corner. Is this possible with the RokGallery module? If 2. is possible, then there is no need to solve 1.
Thanks for your help. - Théo Gerber
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Could you disable rokbooster please and clear server cache. Also ensure that you are using latest version of the template and Gantry 5.
Regards, Mark. -
The following users have thanked you: Gerber Theo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.058 seconds