Jump to content

moonlitdesign

Circle Member
 View Profile  See their activity

  • Posts

    154

  • Joined

  • Last visited

 Content Type 

Posts posted by moonlitdesign

    My website cannot scroll up or down smoothly after hidden overflow

    in Customize with code

    Posted

    On 2/21/2022 at 12:12 PM, paul2009 said:

    The site appears to be working for me.

    If you are still having difficulties:

    • check you are using one of the latest supported browsers
    • temporarily remove all custom code to see if this resolves the issue.

    If you still experience difficulties, contact Squarespace Customer Care for support using this link.

    Hey, we found the bit of code that was breaking the mobile scroll, however it's the code needed that removes the excess page space on the sides. Do you have a work around instead of using the code below? 

    html, body {overflow-x:hidden;} 

    My website cannot scroll up or down smoothly after hidden overflow

    in Customize with code

    Posted

    2 minutes ago, paul2009 said:

    The site appears to be working for me.

    If you are still having difficulties:

    • check you are using one of the latest supported browsers
    • temporarily remove all custom code to see if this resolves the issue.

    If you still experience difficulties, contact Squarespace Customer Care for support using this link.

    its on mobile view only, i have sent it to a few other friends as testers and they are experiencing the same scroll issues. It started to happen after I added an announcement bar, but when I tried to remove it to see if that would fix it, the problem remained... 

    sticky nav bar top padding issue

    in Customize with code

    Posted

    9 hours ago, tuanphan said:

    You can consider disable announcement bar by adding this to Design > Custom CSS 

    .sqs-announcement-bar-close {
    display: none !important;
    visibility: hidden !important;
}

     

    Thanks for the reply! the announcement bar is hidden on scroll. I have fixed the padding issue but the scrolling problem is still at large. I don't know why but every page is getting stuck when scrolling on mobile, please could you check this out? 

     

    www.moonlitdesign.uk/home

    Stop page scroll on mobile when navigation dropdown menu is open

    in Customize with code

    Posted · Edited by moonlitdesign

    On 2/7/2022 at 12:48 PM, tuanphan said:

    It looks like you removed burger menu. Do you still need help?

    Hi Tuanphan, 

     

    Yes please I do still need help. I have also managed to break a few other things on my site if you look at my other threads. I'm really not sure what's going on! 😞

     

    www.moonlitdesign.uk/home 

     

    The dropdown menu on mobile shows the sticky navigation bar instead of the normal menu header, when you scroll/ open the menu from anywhere other than the landing page. 

    Since adding in an announcement bar,  It has affected the scrolling ability on mobile where the page seems to be getting stuck!!!

     

    Thank you so much in advance. 

    sticky nav bar top padding issue

    in Customize with code

    Posted

    Site URL: http://www.moonlitdesign.uk/home

    Hi there, 

    Since adding in an announcement bar on my site, my mobile sticky navigation/menu bar has completely messed up and broken. It is showing lots of extra padding at the top than before when it shouldn't, even though nothing else has changed. It is also affecting the scroll ability on mobile, it's as if the landing page is getting stuck and I cannot scroll back up or down for a few seconds. 

    Really need help! thank you!!!

     

    www.moonlitdesign.uk/home 

    why is there a disparity between the mobile view on the editor and my actual mobile!? everything on desktop moving when resize browser!!

    in Customize with code

    Posted

    Site URL: http://www.moonlitdesign.uk

    i'm really struggling to to get to grips with why my website looks different on mobile view on my desktop to my actual mobile. please see screenshots for examples. it's making editing a real ball ache and the view on other mobile testing is all different too . i don't know what i'm doing wrong 😞 

    nothing seems to just centre, nothings aligns where i put it. 

    also on desktop when i resize the browser, everything seems to move and i dont know what bit of code im missing 😞 

    help needed please 😢 

     

    www.moonlitdesign.uk

     

     IMG_1827.thumb.PNG.2fe945594a11cbc0f52332aab12ea665.PNG1942473552_Screenshot2022-02-08at10_55_00.thumb.png.1d4a0b3c98133aea1e3609d46e0fe6bd.png

     

     

    645784158_Screenshot2022-02-08at11_01_45.thumb.png.4d650c8b41537a01f49b12a9c889f785.pngIMG_1828.thumb.PNG.2170d0967656b345edf3cb4a6e6cb7fc.PNG

     

     

     

     

     

     

     

     

    Stop page scroll on mobile when navigation dropdown menu is open

    in Customize with code

    Posted

    Site URL: http://www.moonlitdesign.uk

    Hey!

    I am having issues with my navigation menu on mobile when the dropdown is open. It is currently giving me the ability to page scroll which is causing my sticky nav bar designed for scroll to appear and take over the static nav which has the 'X' close icon. Could I please have some help to try and disable the scroll so the sticky nav does not appear.

    www.moonlitdesign.uk

    FOR MOBILE

    2023725572_Screenshot2022-02-02at17_44_44.thumb.png.3bc521a0a447437433b13dcf54f32026.png518529212_Screenshot2022-02-02at17_44_40.thumb.png.33e5e1f7f5fdf02176e14aa060bb7865.png

    Vertical side tabs 7.1

    in Customize with code

    Posted

    Please could I have a normal mobile responsive for this, struggling!! 

     

    <ul class="main-box">
        <li class="box active"><span>Discover</span>

            <div class="detail active">
                <p> Each projects start with the discovery phase where we collect as much data as possible about your business, your brand and any visual inspiration. Through this research, we will craft two creative directions in the form of moodboards! </p>
                
            </div>
        </li>
        <li class="box"><span>Develop</span>
            <div class="detail">
              <p> Based on your feedback, we then delve into the design phase of the project. Depending on your package,  this would usually start with the choice of two brand concepts, of which we will develop the one you resonate with most for your full visual identity. Each project allows for a few rounds of amendments until we achieve the desired look. </p>
                
            </div>
        </li>
        <li class="box"><span>Deliver</span>

            <div class="detail">
                  <p> Once we’ve signed off all the designs, I will start packaging all of your files for you, available through your own client portal.  For each element, you will be provided with multiple file types for all your web and print needs. You will also receive all relevant launch material to help you deliver your new branding.</p>
                
            </div>
        </li>
        

      
    </ul>

    <style>
      @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


    body 

    .main-box
    {
        display: flex;
        background: none;
        margin: 70px auto 70px auto;
        width:1000px;
      
    }

    .box
    {

    height: 400px;
    padding:10px;
    border-right: 1px solid black;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    position: relative;
    overflow: hidden;
    list-style: none;
      background-color: #EAE6DE;
      

    }


      
    .detail
    {
        width: 85%;
        height: 100%;
        position: absolute;
        right: 20px;
        top:20px;
      bottom: 0;
        background: #EAE6DE;
        color:black;
        opacity: 0;
        padding:120px;
      marign: auto;
        box-sizing:border-box;
        webkit-transition: 0.8s;
        -o-transition: 0.8s;
        transition: 0.8s;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
     
    }

    .box.active
    {
        width: 100% !important;
    }

    .box.active .detail
    {
        opacity: 1;
        -webkit-transition-delay: 0.6s;
        -moz-transition-delay: 0.6s;
        -o-transition-delay: 0.6s;
        transition-delay: 0.6s;
        transform: none;
    }

      
    .box span {
        writing-mode: vertical-rl;
        font-size: 30px;
      font-family: meno-banner;
      letter-spacing: 0px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        width: 30px;
        transform: rotate(180deg);
        font-weight: 300;
        cursor: pointer;
        position: absolute;
        left: 0;
        right: 0;
      top: 0;
      bottom: 0;
        margin: 0 auto;
      font-style: italic;
      
    }

    .box.active span 
    {
        left:30px;
        right:auto;
        margin:0;
      font-weight:300;
      color: #57432B;
      background-color: #EAE6DE;
    }

     .box:hover:not(.box.active) span
      {
        background-color:#57432B;
        color: #EAE6DE;
     width: 100%;
        height: 100%;
    }

    .box.active span
    {cursor: default;}
      
    .box p 
    {
        line-height: 24px;
    }


      
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var getslide = $('.main-box li').length - 1;

        var slidecal = 30/getslide+'%';

        $('.box').css({"width": slidecal});

        $('.box').click(function(){
            $('.box').removeClass('active');
           $(this).addClass('active');
        });
    </script>

    Stop custom 'typewriter' code animation running on mobile

    in Customize with code

    Posted

    Site URL: http://www.moonlitdesign.uk/photography

    i'm looking to get this desired typewriter effect on my site, but it's just not working at all as seen similarly to here:

    https://www.thecontentcreator.co.uk/

    i've tried multiple things and codes from the forums and the only thing that i can get to work and animates is:

    HTML IN MARKDOWN:

    <div class="typewriter">
        <div class="typewriter-text">
          <h1>
          STAND OUT WITH
         </h1>
      </div>
    </div>

    CSS IN DESIGN > CUSTOM CSS

    .typewriter {
        font-family: ogg-regular;
        display: flex;
    }

    .typewriter-text {
        display: flex;
          overflow: hidden;
         animation: typing 4s steps(20, end), blink 1s step-end infinite;
        white-space: nowrap;
      color: #006373;
        border-right: 3px solid #bdbdbd;
          box-sizing: border-box;
    margin: auto;
    }


    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }

    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: #bdbdbd; 
        }
    }

     

     

    but it doesn't work how I desire it to. 

    I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

    Stop custom 'typewriter' code animation running on mobile

    in Customize with code

    Posted

    I've just seen your site, it looks beautiful! i'm looking to get this desired typewriter effect on my site, but it's just not working at all.  I wondered if you could help me maybe, like where did you put the code etc?

    i've tried multiple things and the only thing that animates is:

    HTML IN MARKDOWN:

    <div class="typewriter">
        <div class="typewriter-text">
          <h1>
          STAND OUT WITH
         </h1>
      </div>
    </div>

    CSS IN DESIGN > CUSTOM CSS

    .typewriter {
        font-family: ogg-regular;
        display: flex;
    }

    .typewriter-text {
        display: flex;
          overflow: hidden;
         animation: typing 4s steps(20, end), blink 1s step-end infinite;
        white-space: nowrap;
      color: #006373;
        border-right: 3px solid #bdbdbd;
          box-sizing: border-box;
    margin: auto;
    }


    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }

    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: #bdbdbd; 
        }
    }

     

     

     

    but it doesn't work how I desire it to. 

    I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

     

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources