Vicks
-
Posts
65 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Vicks
-
Code for partially sticky header in 7.0 Wexley?
Vicks replied to lina1570047784's topic in Customize with code
notice that its two part. <style> and <script> I believe you need to add separate code blocks, one for style and other for script. -
Code for partially sticky header in 7.0 Wexley?
Vicks replied to lina1570047784's topic in Customize with code
Here you go: <style> #headerWrapper { transition: top 0.5s; } #headerWrapper.hide { top: -100px; } </style> <script> let prevScrollPos = window.pageYOffset; window.onscroll = function() { let currentScrollPos = window.pageYOffset; if (prevScrollPos > currentScrollPos) { document.querySelector("#headerWrapper").classList.remove("hide"); } else { document.querySelector("#headerWrapper").classList.add("hide"); } prevScrollPos = currentScrollPos; } </script> -
@media screen and (max-width: 767px){ .ProductItem-gallery-carousel-controls { height: calc(100% + 70px); } } add this line below my previous code.. its basically directing the slider to have the 100% height of its images, and using CSS calc function to add 70px more to it. And we are only doing it for mobile screen with width smaller than 767px. (this 767 is pre-defined breakpoint in squarespace to alter appearance)
-
.ProductItem-gallery-carousel-controls { justify-content: center; height: 100%; align-items: end; } .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-slides { padding-bottom: 50px; } try this. without any other previous mods.
-
Background hover on navigation "bumping" items
Vicks replied to NadineS's topic in Customize with code
Btw, in your :hover class, you just need to define the properties which you want to change, You can remove the border and padding from :hover class. However, the bump effect you mentioned might be caused by something else. can you show it? a locked draft website should do. -
Try this #yui_3_17_2_1_1681776145571_77 { min-height: 100vh; } // if this doesnt work then try this selector below #page #sections .content-wrapper { min-height: 100vh; } Whats happening is that your homepage haven't got enough content, thus its keeping the content vertically centred leaving gap on top and bottom. Whereas on other page your content height is more than your browser window height. Thats why its not leaving any gaps. If you reduce your window's height, you will see that the gap disappears. With min-height:100vh, we are asking it to stretch the height of content to minimum 100% of viewport height (browser window height)
-
div#yui_3_17_2_1_1681771054549_77 { min-height: 100vh; } its just some hack. I am not sure if this will break the other pages. Just test it once pls.
-
can you try this custom css? <style> #header { height:0px; } </style>
-
Its the same code, just use font-size property to update the font size, you can stack multiple media queries starting from bigger to smaller like this: @media screen and (min-width: 1200px) { .fadeIn { font-size: 0.9rem; } } @media screen and (min-width: 768px) { .fadeIn { font-size: 0.7rem; } } @media screen and (min-width: 480px) { .fadeIn { font-size: 0.5rem; min-height: 10px; // If on smaller screen, the height is too much, you can reduce it too. } } Just play around with different screen sizes and add breakpoints and adjust your sizes and margins wherever the layout is breaking. applying style to .fadeIn will only change the size of fading text, not the "ARE YOU READY TO" part of it. If you want to change the whole text size, you need to apply another class to your h2 element and use that class to adjust the font size.
-
I see its the middle text which is spans across three lines and overlaps the paragraph below a little. is it what you want to fix? Perhaps you want to reduce the font size a bit? Or add height to the fadeIn section so it stays constant and keep some separation with paragraph below. something like this: @media screen and (max-width: 767px) { .fadeIn { min-height: 70px; } } That should work, though I would design it in a different way so that it doesn't float on top of other elements.
-
Your styles are not working because SS has applied !imprtant override on opacity in their theme: .fadeIn:not([data-override-initial-global-animation]) { opacity: 1 !important; } So I think you are better off targeting the parent element and apply opacity there: use .fe-block-bff684b9c89c06c3bb96 as your selector and it should work
-
it looks like your span has position relative and not absolute as in the code above.. I have updated the code: made the grid container relative, so that all child follow absolute position from this grid. made the spans absolute. added line-height so not crop the texts. aligned the items to center, because they all will stick to left once positioned absolute. .fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; } if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; " hope this helps
