Lay Theme Forum

@Danny can you just duplicate one from the stack elements above and change the text?

@danny I can't reproduce this. can you place a image in the stack element?

@Danny by default, text fields should not have a background, meaning you see the color of the body behind it. you can use "background-color: transparent;" if that fixes it for you. But I dont quite understand the problem.

@Jarek there is a total load of over 200 MB on the landing page, that is just way too much to operate smoothly. The videos are in 4K resolution which is also technically too much quality for a thumbnail. Do you know the software https://handbrake.fr ? It's a very good app to compress and resize videos without loosing quality. I would try to get each thumbnail video below 1 MB in size at a width of 1000px.

@Danny there is no need to write an entire html for that. you could just give the body a gradient with custom css.

body{
background-color: blue; /* For browsers that do not support gradients */
background-image: linear-gradient(white, blue);
}

you can use this tool to design the gradient:
https://cssgradient.io

the x buttons clickable area (100px padding) is overlaying the menu points.

@janawodicka you can optimize these spaces around the x icon in the overlay options. its "Close-Icon Space-Top (Desktop)" etc.

And then I would recommend to optimize the spaces above your menu points, right now you make the space with empty <p> tags, like blank rows. it will be easier to create this by adjusting the borders of the overlay.

@alasdair17 it seems you can use <span class="my-class">Second Row</span> and add a custom css style for this class.

For example:

.my-class{
font-size: .8rem;
}

@alasdair17 This is a great idea to handle lightbox captions on mobile. maybe @arminunruh has already integrated an feature like "show caption beneath image on mobile" when the lightbox is turned off on mobile?

Another way would be to get into lightbox settings and set "Image File Caption" as the Default Caption for the Lightbox. You can then give your Image in the Media Section a Description that will be used as Lightbox caption. The following code that goes into Custom CSS/HTML in the Head section will do the rest.

<script>
function addCaptionsForMobile() {
    // Check if the HTML tag has the class "phone-size"
    if (jQuery("html").hasClass("phone-size")) {
        // Select all divs with the class 'img' that have a data-lightbox-caption attribute
        jQuery(".img[data-lightbox-caption]").each(function() {
            var $div = jQuery(this);
            var captionHTML = $div.attr("data-lightbox-caption");
            
            if (captionHTML) {
                // Check if the caption is already appended to avoid duplication
                if ($div.find(".custom-caption").length === 0) {
                    // Create a new element for the caption and add it to the div
                    var $caption = jQuery('<div class="custom-caption"></div>').html(captionHTML);
                    $div.append($caption);
                }
            }
        });
    } else {
        // Remove captions if switching to a non-mobile layout
        jQuery(".custom-caption").remove();
    }
}

// Run the function when a new page is shown
window.laytheme.on("newpageshown", function() {
    addCaptionsForMobile();
});

// Add a resize listener to recheck the layout on window resize
jQuery(window).on("resize", function() {
    addCaptionsForMobile();
});
</script>

@mr-do this effect is called "mix-blend-mode" with the setting "difference" and a white color for the icon that you can apply with custom css.

@vua on my 5k apple studio display it looks fine. if your display does not have a high end resolution the thickness of very thin lines can vary.

can you show us a screenshot or a link?

@emresenoglu try to use that for your custom video class:

position: absolute;
top: 0;
right: 0;
width: auto;
height: 100vh;
aspect-ratio: 1;

But you have to reflect if this is the best approach webdesign-wise, also considering mobile and tablet layouts.

you could try "set browser height for row height" for this row in the gridder and then give the video a class and make it "height: 100vh" with custom css for starters.

what would happen if your browser window is also square? there would be no space left for the text, right?

the flash is because the image are lazy-loaded, meaning they get loaded when their time comes to be visible in the carousel. and your time setting is just too fast for that to look "good". it also flashes on desktop. Maybe an animated gif is better for that?

@Sebaster if you have that extensive skills in CSS and coding (which I just assume from your post) maybe a WordPress + Theme is not appropriate at all for your project? LayTheme is focused on bringing rich layout possibilities to people with less or no coding experience, while also offer a broad space for customization.

But what you want to achieve is something like a Tablet-Layout in between, right?

@alvarodoze as far as I know the google image is picked by "importance" or "priority" according to your website structure. But as you can see I get a different one than you. maybe @arminunruh has an idea for that.

The og picture you have already set should also work for sharing that in LinkedIn etc.

the columns get stacked under each other on mobile by default, because desktop layouts can be too sophisticated for a small mobile display. you can create a custom phone layout etc, depending on what you want to achieve.

The image appears when you share a link to your website on Facebook or Twitter etc., just like the Headline suggests. The Image in google is a different kind of image.

@j36g2 try to inspect the code and figure it out.

You are basically scrolling all layers at once but it just looks like its one after each other.

the approach is the right one. front layer is 100vh, 2nd layer is 200vh, etc., use "z-index" to put them behind each other. then inside these layer is a div with position sticky that contains the text. You can use http://codepen.io to try the structure and then try to somehow do that with lay theme.