Lay Theme Forum

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.

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

have you tried "!important"?
a:hover{ color: black!important; }

@viktorhor you can register your site at "Google Search Console" and have it properly indexed.

search.google.com/search-console

Would it be helpful to have the site background color displayed in the text editor? Because white font is not visible.

@NDT your footer has a z-index of 10, that is the "layer" it is the level it is placed. your elements in the grid start at z-index 1 and then go up with each element. so you could make a css for the footer to place it somewhere very high.

 #footer-region {
      z-index: 999;
 }

@arminunruh maybe you can check why the elements get a higher z-index.

@NDT Position: fixed takes the element of the layout, so you would have to define the margins, width, height, etc. for the element with css

@lauran First I would make the intro video way smaller, because now its 10MB and that just takes too long to load to work as an intro video.

Heres an app for that:
https://handbrake.fr

Becuase the intro video is just a couple of pictures changing, you could also try to make it work as an .gif file.

@doorofperception what would be the "original" color? Because the UdK svg is violet by default. you can add a hover css with filter: brightness(0); to make them black so it fits to the rest. something like that:

 .lay-socialmedia-icons img:hover{
      filter: brightness(0);
 }

@loops that is a great portfolio. just wanted to note that the site has quite a poor performance. for example the thumbnails are like 2MB each, that can take a lot of time to load it all and react properly. in this small size you would be very fine with images that have just a few hundred KB in size.

 <li id="menu-item-5536" class="instaicon menu-item menu-item-type-custom menu-item-object-custom menu-item-5536">
      <a target="_blank" rel="noopener" href="https://www.instagram.com/t0zzawozza" class="_Default _Default" data-type="custom">
           <span>&nbsp;</span>
      </a>
 </li>

As you can see in the html. your <li> gets your custom icon and then the <a> has a background color in black on a mobile layout. so you kinda need to deactivate that background of <a> inside your custom <li>.

 .instaicon a {
  background-color: transparent!important;

}