-
Posts
-
Hi, I am trying to figure out a way to have an section with a static background, and then a 3/4 column with a slide show with text, images and a call to action button, including one slide with an embedded video. Then next to that is a 1/4 column with content that includes a form.
I tried doing this with LayerSlider, but am not able to drag the layerslider into an element or color section. I’ve also tried putting the 1/4 elements into the slider itself, but that’s not going to work, as the slider goes by faster than the form can be filled in. Is there another way you would suggest getting this done? Thanks.
Hey janetgot,
not sure what you want to achieve, a link showing an example would help. Maybe there is a plugin out there with such a function.
Best regards,
AndyI think I figured it out on my own. I was able to add the layerslider using the shortcode in a code block, instead of through the drag in element, and that seems to work fine. I’m just struggling a bit with the responsive elements in the Layer Slider, as it is making my images and video much smaller than they need to be.
But let me know if you have suggestions!
Thanks,
JanetHi,
try this code inside Quick CSS field:
@media only screen an (max-width: 767px) { img.ls-l.hide-screen-shot.ls-preloaded { width: 315px !important; height: auto !important; }}and adjust as needed.
Best regards,
AndyThank you for your help. I am close to getting this where I want it to be, but have a few lingering issues regarding responsiveness.
1. Currently the slider settings are set for Width: 65%, and Height: 660px, and it fits well into the page at desktop size. I’ve tried also using percentages, and turning responsive on and off, but haven’t found the magic settings that will make this look right on iPad (portrait). Because the height is 660px, it cuts off one of the images that I am trying to move down to fill the space nicely. If I look at the inspector there are several sections where the height is hardcoded in there to 491px and I can’t figure out how to override this (see screens sent privately)
2. The second issue is that we have an embedded video, which doesn’t play in devices, so I have an image fallback for that. My issue is that the slide still pauses for the length of the video. I am guessing that this is because the slideshow pauses for the video, but if the video isn’t actually playing, can we skip over. Does that make sense?
Thanks for your help. Janet
Hi,
1.) It looks good to me on iPad portrait mode:
Basically you need to use media queries, for more infos about it check this site: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
2.) Would be bet to open a different tickets for this, otherwise it get very confusing here.
Provide us a precise link showing what you mean.Best regards,
Andy1. No, it’s still off, even in your screen, the bottom third of the image is missing, because the height of the slider is hard coded into LayerSlider, and I’m trying to figure out how to increase it via the media queries. If you look at the code in the screenshot I sent, the ls-wp-fullwidth-container class and several others are hardcoded with the slide height, so it cuts off the image.
2. Okay, I’ll open a new ticket.
Hi,
in layerslide you can use custom code for each slide. So just insert a code containing media queries to achieve different results for different screen sizes. Add something like:
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { height: 320px !important; width: 530px !important; }for the slide in question and adjust as needed.
Best regards,
Andy
- You must be logged in to reply to this topic.