@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.
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> </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;
}
@K_Rim it seems you have placed your content in one row with "place freely". you could try to place the copy text in one row, and then the image and headline in a new row below.
@panteley try this:
transform: translateX(-50%)!important;
maybe this forces your style to be applied at page load.
imagine a container that contains the headline and below the image. now you give the headline a "position: sticky; top: 0;" as a custom css. Maybe you can work with that?
@albrecht how would that work for an element that is in the last column on the right, where there is no more space to expand?
@Armin-Unruh image-rendering: crisp-edges; kinda resolves it, but I dont know how that affects other stuff.
@Joy Go to "Customize" → "Menu Style". There you can customize this settings, there is also a section for "Mobile" settings.
@Brief put this in your custom css for mobile:
.flickity-prev-next-button{
display: none;
}
@fredyatb now that is one nice website.
You have to select a project-thumbnail on the bottom of the right bar to publish a project.
Check Wordpress-Settings/Permalinks