carousel / fixed & Centered
-
Hi there !
I am trying to achieve a carousel with images filling most part of the screen, but on a setting that would not "push" the footer more than the height of screen. I'd like a page without scroll and with the footer placed at the bottom. I think there are gridder options to achieve but I seem to struggle finding how to get there ...
Here an exemple bellow.
Page with carousel : https://arnaudcordel.fr/chronos/
What I try to achieve* : https://arnaudcordel.fr/totems/*Not related to this addon.. but on this page, how could I also have the video or a single image perfectly centered and responsive ? Now is just a bit of luck-looking playing with percentages
Thanks a lot for any help,
A. -
Well you need to calculate the heights correctly
use one row for your footer, set the row to idk 100px height,
using right click use custom browser height,
set frame top and frame bottom to 0 for thisthen for your main content, set frame top and frame bottom to 0
create a carousel, with fixed height: 100vh - 100pxsee what we did there?
100vh means 100% of browser height. we create one 100px height footer and the rest of the page is 100vh - 100pxwe remove frame top and frame bottom because both of these values are added to the layout height of that layout. but of course you could also add frame top and 0 but then you'd have to adapt the heights for your custom height row and fixed height carousel
When you center an element, make sure when its selected, this button is active
When you just move it around vertically using drag and drop, it could also get 1/3rd vertically aligned or 2/3rds vertically aligned; as you see here:
-
Thanks a lot for your quick feedback !
The method indeed placed me on the right track. I still had to add an offset to the carousel element as per some particularities of my page. Here is the final :)https://arnaudcordel.fr/prismes/
https://arnaudcordel.fr/matter-of-matter/Little feedback before closing.. I noticed what could be a little bug on the "Site Title". My text format created for this element have the "Full Cap" transform option. But it is not written in full cap on the site's settings. So i get it classical in Google but in full cap on my website. It does get full cap on desktop, but fails on mobile were the text style transformation doesn't apply. Maybe something to fix, or it is an issue on my side ?
Thanks a lot,
A. -
the full cap setting doesn't make the word all caps in the html code
it only displays it full caps using cssif you want true full caps you'd need to write your site title in full caps in customize → site title
t does get full cap on desktop, but fails on mobile were the text style transformation doesn't apply. Maybe something to fix, or it is an issue on my side ?
probably not all textformat settings are applied to the mobile site title or the mobile site title has different settings in the customizer. for the site title for mobile you have the settings in customize → mobile → mobile site title
these settings differ from the desktop site title
-
anyways congratulations very nice website!
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it