Lay Theme Forum

Hi! Since last update we have a weird bug on our website. If I go to our work overview with the thumbnails I see our projects, but when I refresh that page it loads the latest project while still keeping the same url. (/work). If I click in the menu to go to work overview it shows the thumbnails again. So this problem only occurs after a refresh it seems, still pretty weird. Anybody has this problem too or knows what's up?
Thanks!

Hey Rick, just sent my site via PM. At first the movies had autoplay on some of them. Now none of them work anymore. It's good to know I tried this with different MP4's I uploaded to Vimeo, but all rendered without sound.

This is the video embed code I used for all of them. I used XXXXX instead of actual Vimeo ID in this example.

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/XXXXXX?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Actually this gives very varying results. Sometimes it autoplays, sometimes it doesn't, all with same video and Vimeo link. Any idea what could be the problem?

This is wonderful! Sometimes the easiest things get overlooked ;) Thanks for your help!

hey! I am trying to embed a video with autoplay and loop. The video doesn't have any sound. I can only insert the normal link but then autoplay / loop doesn't work. Found this very old topic: http://laythemeforum.com:4567/topic/449/add-to-vimeo-video-auto-play-and-loop
but it is not working really well. Is there a better way to have an easy way to embed Vimeo with autoplay & loop?

Thanks!

I'd like to report a bug. If you have a menu bar that disappears on scrolling. Sometimes the buttons within the navigation bar become visible without the navigation bar itself. This results in weird looking floating buttons on top of your page. See screenshot. If think this behaviour is triggered when the browser window is resized. Nevertheless this shouldn't occur, even after browser resize by the user.

Fixed it! :)
Wanted to share how, so it is also beneficial for other users:

First, use javascript to get height from div and apply to other div.

<script>

window.laytheme.on("newpageshown", function(){
    var FooterBigLeft = jQuery('#footer-big-left');
    jQuery('#footer-right-get-height').css({ height: FooterBigLeft.height() });
    jQuery('#footer-right-get-height .element-collection').css({ height: FooterBigLeft.height() });
    console.log(FooterBigLeft.height());
});

</script>

FooterBigLeft defines the height, and #footer-right-get-height + .element-collection get the height applied.

Then, make a flex of the div that got the height applied to it. Where I had problems was that the theme nests a lot of div's to have the site working properly. But a flex only works to it's child, hence I applied the height to .element-collection since that is the parent div of the children that need to spaced out evenly. Basically then only justify-content:space-between; is needed. Looks so simple now but this took me many hours. Thanks for the help along the way @mariusjopen !

#footer-right-get-height .element-collection {
display:flex;
flex-direction:column;
justify-content:space-between;
}
#footer-right-get-height .text > *:last-child {
margin-bottom: revert !important;
margin-bottom: 10px !important;
}

hey @mariusjopen , I now know that if I turn the following of in the inspector it works:
.text > *:last-child {
margin-bottom: 0 !important;
}

This line of css if from: front.style.css:499

Overriding seems not an option (!important doesn't work) and besides, this seems a vital style to keep styles intact. So how can I make the flex start and end alignment get to work while still allowing for margin-bottom 0? :)

Thank you @mariusjopen ! Yes, even more frustrating because I can almost see it working but then it's not. I've sent you a PM with the link. Thank you and have a good weekend!

Hey @mariusjopen , I almost have it! But the very last part I can't seem to get working. Could you have a look at my code please?

I used this javascript:
<script>

window.laytheme.on("newpageshown", function(){
    var FooterBigLeft = jQuery('#footer-big-left');
    jQuery('#footer-right-get-height').css({ height: FooterBigLeft.height() });
    console.log(FooterBigLeft.height());
});

</script>

and this css:

#footer-right-get-height {
background-color: red !important;
display:flex;
flex-direction:column;
height:100%;
overflow-wrap: normal;
}
#footer-right-get-height .element-collection {
/* position: initial !important; */
}
.footer-right-get-height-top {
background-color: blue !important;
align-self: flex-start;
}
.footer-right-get-height-bottom {
background-color: green !important;
align-self: flex-end;
}

So the things is:
2 columns. The left one has big text. With javascript I get the height for this column. The right column is actually a element grid with 2 items. The element grid itself has an # id. (footer-right-get-height) and the two items in it have each a class:.footer-right-get-height-top/bottom.
I am trying to give the #id a display flex and then flex the items inside to top and bottom. but that works almost but not yet. I can send (PM?) screenshot if you'd like!

Many thanks in advance!

@mariusjopen Thanks I will. I think I need jQuery to get hight of text-div and apply that height to the image div. The image div is a cover so the image is always full bleed. Something like that perhaps... I was hoping this could be achieved with css flex instead actually

Hi @mariusjopen , I searched the whole forum but can't find it ;( Can you point me towards the thread perhaps or help me out with the code? Thanks in advance!

Hi @mariusjopen , Thank you for your reply. I did before posting but couldn't find it. Will search again. Thanks!

YES! this was driving me so crazy. Or perhaps being inside too much these days was. Thanks a lot anyhow!

Hello. I have a grid with two items: one text and one image. I want the image to be as high as the text. The image may be clipped. I tried everything (custom class on row, and separate elements) and almost got there but can't get it to work properly. Please see attached screenshots for clarification.

Hello! I'm really loving this theme and as a designer with some coding skills I am really amazed by everything that's possible with this theme. There is one thing I can't figure out though:

The project page scrolling behavior is different than other pages. It auto scrolls to the next 'section'. This is highly annoying and I bet there is some switch or way to turn this off but I can not seem to find it ;) Am I overlooking this in the settings? or is there an easy way to disable it with custom CSS?
Besides this it also seems that margins and paddings for images and items in a project are different than elsewhere. Could this be related?

Thanks!
Vincent