Lay Theme Forum

maybe:

 .thumb .title{
 white-space: nowrap;
 transform: translateX(-50%);
 }

Than can move the text to the left by 50 percent of its length. You can adjust this value.

@PatFontebasso nice photos on your website! I think for this animation you would need a js script that scales the image according to the scroll-position.

I made this here with the logo, but it gets smaller on scroll.
https://sanmedicus.de

you can use the website codepen.io to mess around and build sketches before implementing it to lay theme.

@weodeo in your fiddle, you use symbols such as "$", that have to be translated to something else in lay theme. Would be useful if you post your code here.

"If you don't want a single element to transition, add the class "no-animation" to that Element. Right click the element in the Gridder, choose "Edit HTML class and id" and enter "no-animation"."

@Eeva try this in custom css:

 video {
     -webkit-mask-image: -webkit-radial-gradient(white, black);
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
 }

Thank you @ffinger. In general, you can explore such features by using the inspection mode of your browsers developer tools.

In this case, it was made with Javascript in the Custom Head Content section of Laytheme: A klick on the Button changes the height of the text element.

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery(".infobutton").click(function () {
jQuery(".textfield").css("height", "52%");
});
jQuery(".closebutton").click(function () {
jQuery(".textfield").css("height", "0%");
});});
</script>

@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.

@j36g2 maybe these color-planes are very high, like three times the window height, and the text inside these planes has "position: sticky; top:0;" Then you have to fiddle with some custom css to align them one after each other.

@panteley try this:
transform: translateX(-50%)!important;

maybe this forces your style to be applied at page load.

@panteley

Add this to your main-text-cover css:

left: 50%!important;
transform: translateX(-50%);

@Brief put this in your custom css for mobile:

 .flickity-prev-next-button{
 display: none;
 }

@linazangers have you checked in the lay options -> carousel add-on the settings for vertical alignment of slides?

try a !important after your color, like:
color: #ffffff!important;

or manipulate this, in the inspection you can see that this is where the actual color is declared:

.sitetitle-txt-inner {
color: #000000;
}

@pipaslol reagarding your first question:
when making the element fixed you would also have to give him a "width", "left", "padding" etc. to make it look like you want, because by "fixed" it gets taken out and placed on top of all content.

I would say you don't need a notice for cookies that are necessary to technically run the site. I would say that is the case here.

Apart from that you need a Privacy Statement where you say that these cookies are set.

That would be my approach, but without legal liability.

Felix

@lortnok you might want check out woocommerce hooks.

this goes into functions.php of your theme:
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

this goes into your php file for the desired page:
<?php woocommerce_breadcrumb(); ?>

But I don't know if it works with lay theme this way. Maybe you set up a dummy website and fiddle with it.

@arminunruh i suppose this could be integrated "easily", maybe you put it on your list :-)

@Aleksandar isn't it possible to place the desired single project thumbnails in this area?

@sallyhlee

The Button:
<a href="#my-destination">Link</a>

The part on the same page:
<div id="my-destination">blabla</div>

@Madash the lengths of the lines change because they get their value from the overall width of the screen (%), just like the text-boxes. the letters have a specific size (px) and don't change.

You could give each line an individual class and apply a specific size with css. for example:

.line-one{
    width: 500px
}