moonlitdesign

On 4/13/2024 at 8:59 AM, tuanphan said:

The page doesn't work

www.moonlitdesign.uk/portfolio/fortheloved-photography

On 4/13/2024 at 8:56 AM, tuanphan said:

What should it look like? I tried checking some pages but all are same

https://www.moonlitdesign.uk/enquire

https://www.moonlitdesign.uk/home-old

thank you for this, i ended up taking the code out and just left it as normal text 🙂

On 4/13/2024 at 8:56 AM, tuanphan said:

Add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header#header img {
    opacity: 0 !important;
}
header#header.test-something img {
    opacity: 1 !important;
}
</style>

 

thank you so much! is there a way to change the code to only happen on the homepage, and only on mobile? 

On 4/12/2024 at 4:32 PM, Web_Solutions said:

What is the website URL?

www.moonlitdesign.uk/blog

Hey, i'm looking to set a time delay on the mobile header sticky nav logo.

on the homepage only, i would love it to enter / transition in when you hit the second section of the homepage.

i.e the 'guiding soulful wedding creatives..' bit, once you've scrolled past the big main sticky logo image. 

i believe i've got it to do this on desktop, but i need a different time set for mobile, is this possible? i believe its a @tuanphan bit of code i originally used in home settings > advanced > code injection

www.moonlitdesign.uk/home-old

Hey @tuanphan i can't believe it my menu has broken again some how hahah!!!

the thing is it works perfectly when opening it from content pages, so it's something on the homepage that is messing with it. 

would love to know any insights you have on this.

I feel like there must be some code that i need to wrap in a desktop media query, but i have no idea which one. 

www.moonlitdesign.uk/blog

hey im having issues with the padding of my blog grid images. I tried to add a border with 8px padding but it is affecting the alignment of the image. i have tried margin auto etc but not working!

thanks

hey, on my portfolio sub pages, the 'next' portfolio page pagination buttons are showing on the right of the screen.

is it possible to move this to the top of the page instead, so it runs full width and doesn't interfere with the page layout. 

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

7.1 fluid engine, portfolio sub pages

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

Hi there, not sure what or why, but for some reason my type writer text effect that is in the footer has stopped working but only on the homepage. is there an obvious obstruction here that i'm missing? the homepage is the only page where there is also another type writer text effect code block on the landing page, so i'm assuming it's that but i don't know why!

www.moonlitdesign.uk/home-old

-bottom left on footer: • serving internationally 

thank you 🙂

@tuanphan hey ! i've used some of your code that i've found around on the forum to try and create a header shrinking effect. i'm not super happy with desktop but i can live with it. on mobile however, i'd really like help with the following:

- i'm wondering if there is a way to delay the shrink nav logo appearing until you have scrolled to the second section of my homepage only on mobile! 

www.moonlitdesign.uk/home-old

fingers crossed and thank you!!!

8 hours ago, tuanphan said:

Use this CSS code

@media screen and (min-width: 768px) {
[data-section-id="65e07302487e8725e7601b17"] button.user-items-list-carousel__arrow-button {
    opacity: 1 !important;
    transform: unset !important;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:before {
    content: "( PREV )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:before {
    content: "( NEXT )";
    font-size: 13px;
}
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:after,
[data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:after {
    display: none;
}}

 

fantastic thank you so much!

also looking for this! the auto loop is jumpy when it goes back to the beginning by scrolling left. it would be great to have it auto play through back to the beginning by just scrolling to the right still! 

@tuanphan thank you for the above! 

just testing the site and when you click next/prev, they disappear as you go through the carousel. is there a way to keep them visible through the whole scroll of the carousel? 

www.moonlitdesign.uk/home-old

On 3/27/2024 at 8:04 AM, tuanphan said:

Try this to Custom CSS box

/* remove background color on summary */
div#block-yui_3_17_2_1_1710505306139_92718, div#block-yui_3_17_2_1_1710505306139_92718 * {
    background-color: transparent !important;
}

 

Hey sorry @tuanphan I have only just seen this. this unfortunately did not fix the problem   😞 I can't think of anything else or why it's doing it!

On 5/13/2023 at 1:10 AM, hjnz said:

@tuanphan Hi there! im still a bit stumped on finding a solution to this one! if you had anything i could try id love to give it another crack 🙂

cheers

have you tried: 

.fe-block.fe-block-c92fd2ec45055facf4ad {
    mix-blend-mode: difference !important;
}

11 minutes ago, Nick_SquareKicker said:

@moonlitdesign,

When your horizontal scrolling sections appear that have a 1 second delay like there is a transition speed attached to these.  I think this is caused by the below custom CSS which will affect how the page scrolls in. Is this your issue?

@keyframes SlideIn {
    0% {
        transform: translatex(100%)
    }

    100% {
        transform: translatex(0)
    }
}

#page {
    animation: 1s ease-out SlideIn !important
}

 

Hey no but thank you! i managed to find the culprit. i had body, html overflow-x added to my css. I will have to find another way to stop page movement now hahah!

23 minutes ago, JessicaM said:

@bawebb123 & @moonlitdesign 

Try this.. this will add it to the primary buttons...  change "primary" in the top line to "secondary" or "tertiary" if you want to use it on other buttons. **If you're using fluid engine, be sure the button is set to "fit" and not "fill".

#siteWrapper .sqs-button-element--primary:not(div.sqs-add-to-cart-button)  {
  display: inline-block;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  box-shadow: none !important;
  color: #fff;
  font-size: 1rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(to right, #2DACDB, #0cf);
   border: none;
 
  &:before {
  content: "";
  background: #1D386E;
  position: absolute;
  width: 130%;
  height: 200%;
  z-index: -1;
  left: -15%;
  border-radius: 100%;
  transition: 0.2s;
    bottom: -200%;
  }
 
  &:hover:before {
  bottom: -50%;
  }
 
&:hover {
   opacity: 1 !important;
  }
}

THANK YOU !!!!! that's perfect. just had to make few adjustments here and there but otherwise perfect. can't thank you enough!

#coolbuttonhovereffect #circlebuttonfillonhover

16 hours ago, Nick_SquareKicker said:

Hi @moonlitdesign,

You can Enable Horizontal Scroll on mobile with SquareKicker using the Toggle in the tool settings "Mobile Devices" See Screenshot below.

It's not on by default because normally there is too much content in the section to all fit on a mobile device and content gets cut off on smaller devices so you may want to reduce the content if you want to enable horizontal scrolling on mobile.

It looks like the space you are describing is caused by extra rows in the Fluid Engine Grid.  You can use Squarespace's Mobile Edit mode to reduce these rows.  The rows of a section is one of the only section settings that is unique to mobile and desktop.

If you need further help you can reach out to support@squarekicker.com

 

Hey sorry yeah i turned it off just for now, thank you for your reply.
i've switched it back on so you can see whats happening.

i'm not too sure how to describe it to support team!

9 hours ago, tuanphan said:

Use this CSS code to move X to center

body.header--menu-open div.burger-inner>div {
    position: relative;
    left: -5px !important;
}

 

Hey @tuanphan ,

thank you so much!!!! i just had to edit the code slightly to this instead:

//close icon//

body.header--menu-open div.burger-inner>div {
    left: -6px !important;
}
 

//////

the position relative was making the icon not look like a cross for some weird reason haha so i just took it out.

all the best

@tuanphan thank you that worked a treat!

same, did you have any luck?

On 10/11/2022 at 10:52 AM, Nick_SquareKicker said:

Hi @44degreesnorth,  Something like this looks like a scrolling slideshow.  This is not possible with SquareKicker yet, but this is on our roadmap.  I recommend using Squarespace's Auto Layout Section.  It will be very close to this. 

Hey @Nick_SquareKicker I can't seem to get the mobile horizontal scroll working on my site whatsoever! it is leaving a large blank gap underneath the section and not completing the full scroll of the section. any help would be amazing!

thanks!

www.moonlitdesign.uk/design-services

Hey! i don't know why this has stopped working as it was fine this morning.

i had an overlapping image but now the section below is showing above / on top of the image.

i've tried z-index but no luck. 

here's current code:

@media screen and (min-width:768px) {
#block-dcd7158a35cf1cf082ed {

transform:translateY(50%);
z-index:9999!important;}
}

www.moonlitdesign.uk/design-services

45 minutes ago, tuanphan said:

Use this CSS code

div.header-menu-nav-item [data-folder] .header-menu-nav-item:before {
    display: none;
}
.header-menu-nav-item:before {
    position: relative;
    top: -10px;
}

 

thanks! this in theory works, but makes the menu when open from another page even more messed up.

im not sure why it is appearing differently from different pages! crazy.