Jump to content

MAC1

Member
  • Posts

    100
  • Joined

  • Last visited

Posts posted by MAC1

  1.   On 5/5/2024 at 7:25 PM, colin.irwin said:
      Quote

    Colin.irwin wrote: I’m reading your post on an iPad so can’t really test the code but it looks to me like the rollover image is tiling. It’s a background image so it will tile to fill its container, which  I believe is 250px high (based on default styles at the top). Try changing the height to the actual height of the image so that the container exactly fits the image. 

    Hi Colin @colin.irwin , thank you i've tried your suggestions and it does look alot better. 250px x 61 px is the the size.
    although it still shows 1px of the tiling.
    I've tried increments of the px like 250.1 , 250.2 or 61.2 , 60.9 and i cant get rid of the slight tile that remains.
    the button image is wall to wall covered so no transparency exists at the edges also.

    When i do a straight hover (without preloading) i dont have the issue, its when i preload, this tiling effect happens, if that info helps.


    Cheers.

    Any idea how to stop the tiling or mask it better?
    new result, better but with a slight tile regardless of px inputs.

    image.png.7a14c8de6111fd4d74028f5cf46a5a53.png

  2. Custom button creator:

    Be awesome if squarespace had a custom button creator. Pick your "before" hover and "after" hover image. Modifiers could be added like hover effects (scale up, fade, particle effects etc). The button you create would be stored and ready to use anywhere on your website.
    These things can be coded with css but i'm yet to find a working way to preload my hover img into a button, so there isn't a loading flash before changing to the hover img first time you visit the website.
    Also just easier for the casual consumer if it was a block you could add and modify rather than writing css code for each button you create.

    Issue I had originally here, seems the code is a bit messy but its so close: 

     

  3. On 5/7/2024 at 4:01 AM, inside_the_square said:

    Hey @MAC1 - I'm glad Colin was able to help, but I think your code is way more complicated than it needs to be! I'll share some custom button concepts when I write up the AMA answers later this week; stay tuned & feel free to ask me any other CSS questions you'd like an answer to 🙂 

    Hi @inside_the_square - Thank you for looking at this and look forward to the custom button concepts! haha Yes ive done alot of copy pasting code im sure there is conflicting values and confusing code, not much of a coder here. The preloading was important since just hover code was making the button flash before bringing in the other button img. Solving this issue will have my website almost finished, cheers appreciate it!
    I may have 1 or 2 other CSS questions on other parts of the website. Should I message them in here? 
     

  4. 2 hours ago, colin.irwin said:

    I’m reading your post on an iPad so can’t really test the code but it looks to me like the rollover image is tiling. It’s a background image so it will tile to fill its container, which  I believe is 250px high (based on default styles at the top). Try changing the height to the actual height of the image so that the container exactly fits the image. 

    Hi Colin @colin.irwin , thank you i've tried your suggestions and it does look alot better. 250px x 61 px is the the size.
    although it still shows 1px of the tiling.
    I've tried increments of the px like 250.1 , 250.2 or 61.2 , 60.9 and i cant get rid of the slight tile that remains.
    the button image is wall to wall covered so no transparency exists at the edges also.

    When i do a straight hover (without preloading) i dont have the issue, its when i preload, this tiling effect happens, if that info helps.
    Cheers.


    new result, better but with a slight tile regardless of px inputs.
    image.png.7a14c8de6111fd4d74028f5cf46a5a53.png

     

  5. Preloading a hover custom hover button so it doesn't flash in, nearly got it working with  1 issue to figure out.

    Hi Becca @inside_the_square, i've learnt alot from your videos, thankyou!

    I've been scouting all day and found a solution that is almost there. I had issues with my hover custom button flashing before changing which was jarring design wise. I fixed the flashing issue with preload code that works, but now the hover tiles and repeats itself.

    This code below preloads the button image so it doesn't flash when changing to the image. but it repeats the hover image multiple times.

    before hover:
    image.thumb.png.d7e22d1c2d1ce1f4134f4263611c9935.png

    When you hover on button:

    image.thumb.png.32a8df309e47ff36284c9811a2499a29.png

    Can you see the issue with the code to fix this issue?

    /* Default styles for the centered div */
    div#block-yui_3_17_2_1_1701422267607_2792 {
        width: 250px;
        height: 250px;
        overflow: hidden;
        margin: auto; /* Center horizontally */
        position: relative; /* Use relative positioning */
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Media query for window width of 1200px */
    @media (min-width: 1200px) {
        div#block-yui_3_17_2_1_1701422267607_2792 {
            width: 280px;
        }
    }
    
    /* Preload hover effect */
    div#block-yui_3_17_2_1_1701422267607_2792::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/4c70cf50-9227-4584-8ac2-3504045de812/BUT_viewshowreel_ON.png);
        background-size: contain; /* Ensure the image fits within the container without distortion */
        background-position: center; /* Center the image */
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: 1;
    }
    
    /* Apply hover effect */
    div#block-yui_3_17_2_1_1701422267607_2792:hover::before {
        opacity: 1;
    }
    

    Last piece of the puzzle for the website any suggestions are appreciated, cheers.
     

  6. Hi,

    Sorry had to delete last post, needed to word it better. I've been scouting all day and found a solution that is almost there. I had issues with my hover custom button flashing before changing which was jarring design wise. I fixed the flashing issue with preload code that works, but now the hover tiles and repeats itself.

    This code below preloads the button image so it doesn't flash when changing to the image. but it repeats the hover image multiple times.

    before hover:
    image.thumb.png.d7e22d1c2d1ce1f4134f4263611c9935.png

    When you hover on button:

    image.thumb.png.32a8df309e47ff36284c9811a2499a29.png

    Can you see the issue with the code to fix this issue?

    /* Default styles for the centered div */
    div#block-yui_3_17_2_1_1701422267607_2792 {
        width: 250px;
        height: 250px;
        overflow: hidden;
        margin: auto; /* Center horizontally */
        position: relative; /* Use relative positioning */
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Media query for window width of 1200px */
    @media (min-width: 1200px) {
        div#block-yui_3_17_2_1_1701422267607_2792 {
            width: 280px;
        }
    }
    
    /* Preload hover effect */
    div#block-yui_3_17_2_1_1701422267607_2792::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/4c70cf50-9227-4584-8ac2-3504045de812/BUT_viewshowreel_ON.png);
        background-size: contain; /* Ensure the image fits within the container without distortion */
        background-position: center; /* Center the image */
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        z-index: 1;
    }
    
    /* Apply hover effect */
    div#block-yui_3_17_2_1_1701422267607_2792:hover::before {
        opacity: 1;
    }
    

    Last piece of the puzzle for the website any suggestions are appreciated, cheers.
     

  7. I got this code to work, hope it helps someone. Keeps the button image (no rescaling) at 250px at every screen width and also pumps it up to 280px at a window size bigger than 1200px :)

    div#block-yui_3_17_2_1_1701485718961_2891 {
        width: 250px;
        height: 250px;
        overflow: hidden;
        margin: auto; 
        position: relative; 
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Media query for window width of 1200px */
    @media (min-width: 1200px) {
        div#block-yui_3_17_2_1_1701485718961_2891 {
            width: 280px;
        }
    }

     

  8. Hi,

    I have a issue with my custom buttons.

    The button becomes too small on different widths:
    Large monitor looks fine, button is full size
    image.thumb.jpeg.303d25bcbe348eb46b1ea1b4011625de.jpeg

    On a smaller monitor the image scales down too much, I want to keep it at 100% the whole time
    (like how buttons in squarespace behave):
    image.thumb.jpeg.71301cf090368a6fb773241634fa0162.jpeg

    Is it how i've set it up? can i add css that keeps the button at a suitable size?

    Web: https://ellipse-teal-dl5w.squarespace.com/
    Pass: 04

    Here is the button  code at the moment, the hover works and the animated scaling also:

    /* GET IN TOUCH BUTTON*/
    div#block-yui_3_17_2_1_1701485718961_2891 {
        overflow: hidden;
        position: relative;
    }
    
    div#block-yui_3_17_2_1_1701485718961_2891 img {
        transition: transform 0.5s ease, opacity 1s ease;
    
        display: block;
        width: 100%;
        height: auto;
    }
    
    div#block-yui_3_17_2_1_1701485718961_2891:hover img {
        transform: scale(1.05);
    opacity: 1;
    content: url(https://images.squarespace-cdn.com/content/64d0a4ef828d1802cb65112a/94faff05-9d93-477d-952d-4ac5f8579fa3/BUT_getintouch_ON.png);
    
    }
    
    
    

    Appreciate any support on this Cheers,

    Mac

  9. Hi,

    Page: https://ellipse-teal-dl5w.squarespace.com/
    Pass: 04

    I have a awards section that looks great on desktop at its smallest width, still readable and spaced nice.image.thumb.jpeg.dc7965817bcb1ebc181ad85587284abb.jpeg

    But on mobile phones it looks like this, which is too small and the spacing is too much.
    image.thumb.jpeg.3b98f4c8dea541535df6576ca9ae6473.jpeg

    How can I control the size and spacing of the award pictures when it gets to mobile, so that its not tiny. Maybe restrict it to a certain percentage?

    Cheers,
    Mac


    Here is the code the section is using 

    ===================================
       GALLERY AWARDS CODE
    ===================================
    */
    
    /* Gallery awards  - Desktop */
    @media screen and (min-width: 1100px) {
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
            grid-template-columns: repeat(7, 1fr) !important;
          
            padding-top: 13px !important; 
            padding-bottom: 40px !important; 
        }
    
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
            /* Reset or remove scale transformation on hover */
            transform: none !important;
        }
    }
    /* Gallery logos - Mobile */
    @media screen and (max-width: 900px) {
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
            grid-template-columns: repeat(5, 1fr) !important; 
          gap: 40px !important;
            padding-top: 13px !important; 
            padding-bottom: 40px !important; 
        }
    
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
            /* Reset or remove scale transformation on hover */
            transform: none !important;
        }
    }
    /* Gallery logos - Mobile */
    @media screen and (max-width: 767px) {
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-wrapper {
            grid-template-columns: repeat(4, 1fr) !important; 
          gap: 80px !important;
            padding-top: 13px !important; 
            padding-bottom: 40px !important; 
        }
    
        section[data-section-id="65c04f34561f77483f011ccb"] .gallery-grid-item:hover img {
            /* Reset or remove scale transformation on hover */
            transform: none !important;
        }
    }
    
    
    
    /*

     

  10. /*
    ===================================
       LINE PADDING CODE
    ===================================
    */
    
    /* Apply padding to all Line blocks */
    .sqs-block-horizontalrule {
        padding-top: 10px !important; 
        padding-bottom: 10px !important; 
    }
    
    /* Reset padding for specific element with ID */
    body:not(#block-yui_3_17_2_1_1691745460420_38410) .sqs-block-horizontalrule {
        padding-top: 0 !important; 
        padding-bottom: 0 !important; 
    }

    web: https://ellipse-teal-dl5w.squarespace.com/motion/wellfamily-3wcx4
    pass: 04

    Hi,
    I'm trying to have universal code on all my line padding. Except for the footer line. The footer line block is #block-yui_3_17_2_1_1691745460420_38410.

    I've tried a bunch of code variations to no avail.
    The "body:not" code is resetting all the lines not just the the footer line like i would like. Something is wrong with the code. 
    Need some help to learn the right way to exclude elements when universal code is applied.

    Cheers 


    image.thumb.png.d944a1b71c7f974f075321f025e3ce2b.png

  11. I tried javascript code injection into the footer, it doesn't work but is this close or help find a answer?

    <!-- PIP FIX -->
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var sectionId = '64d255619ec2f716e2c78975';
        var section = document.querySelector('[data-section-id="' + sectionId + '"]');
    
        if (section) {
          var videos = section.querySelectorAll('video');
    
          videos.forEach(function(video) {
            video.addEventListener('enterpictureinpicture', function(event) {
              event.preventDefault(); // Prevent entering PiP mode
            });
    
            video.addEventListener('leavepictureinpicture', function(event) {
              // Handle events when leaving PiP mode if needed
            });
          });
        }
      });
    </script>
    
    <!-- end PIP FIX -->
  12. Hi, thanks for your time. Yes I've tried the section height min to L and manual vh. That fixes the issue, but has too much spacing top and bottom design wise.

    I'd like to keep the small spacing at full screen and then when the width is smaller like this: 
    image.thumb.jpeg.306b3deb3f76a3aa8d44ae44d6233e1d.jpeg

    I'd like the spacing to be dynamic and center the contact form like this:a2.thumb.jpg.dc20556d30feaddc4555d48c34a7b2a5.jpg

    So some sort of dynamic spacing css code when the window is a certain width?

    Cheers

  13. Hi,

    page: https://ellipse-teal-dl5w.squarespace.com/contact
    pass: 04

    I have a issue on my contact page. The background image is a full bleed background. But at certain px width it will crop the bottom moon in the image with a grey bar instead:

    Bigger size full bleed looks great:
    image.thumb.jpeg.2fedf05491e598ac52ad7584dec7ec0e.jpeg

    As soon as we resize the screen, it introduces a grey bar and cuts/crops out the full bleed image effect :
    image.thumb.jpeg.d80353b704574409ed878568f595d696.jpeg

    on mobile looks great and doesn't crop the bottom part of the bleed, the moon etc:
    image.thumb.jpeg.48f0fcef22300f7550aeed3ddde8532c.jpeg

    Appreciate all the support given on this space, hope you can help.
    Cheers

  14. Hi,

    home page: https://ellipse-teal-dl5w.squarespace.com/
    pass: 04
    Issue is on homepage:
    I was able to get my home page gallery elements correct in spacing and columns with css. But in mobile mode, I'm having trouble with aligning the 2 gallery grid elements to the "inset" edge like every other element on my home page:
    Gallery grid Id in question:
    section[data-section-id="651f41fea4b86457aeca31fd"]
    section[data-section-id="65c04f34561f77483f011ccb"]

    on desktop mode its fine.
    image.thumb.jpeg.0a90cd0b986ad632ccdcf7214f094fd3.jpeg

    but on mobile mode it doesn't go to the edge:
    image.thumb.jpeg.51e0c7a1a4d14113ff275f19316f2ce6.jpeg        image.thumb.jpeg.bf82218448c22052bcde4238c1c51ee7.jpeg


    Had a look and tried some code but nothing I found works. Appreciate any advice and help on this.
    Cheers

     

  15. https://ellipse-teal-dl5w.squarespace.com/illustration

    Sure here's the link thanks.

    Here's the css code I applied to the portfolio pages also to get stroke border:
     

    /*PORTFOLIO HOVER_________________*/
    
    /* Show stroke border overlay on hover */
    .grid-image {
        opacity: 1 !important;
        position: relative;
    }
    
    .grid-image:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 5px solid rgba(66,198,255,0.8); /* change border color here */
        transition: all 0.3s;
        opacity: 0;
        box-sizing: border-box;
    }
    
    .grid-item:hover .grid-image:after {
        opacity: 1;
        transition: all 0.3s;
    }
    
    /*PORTFOLIO HOVER END______________*/
    //-----------------------------------



     

  16. Hi,

    I've made a "Latest work" gallery (grid:simple) block on my home page.
    I'd like each image link to have a "hover" property like on my portfolio pages.


    Current layout: hover does nothing different and text description padding is too low on image.
    image.thumb.png.74ccd45efd0491326c03848d9c3b4a9e.png

    After changes:
    1. padding on description text is closer up on image
    2. Description text is this color #656565
    3. Hover over stroke color #42c6ff + 5px stroke + image 20% bigger like in portfolio pages (motion/design/illustration)

    Desired look:

    after-look.thumb.jpg.635e5fc09796ecf789456f1c2ad65cc9.jpg

    Web:
    https://ellipse-teal-dl5w.squarespace.com/

    Pass: 3

    Cheers,

    Mac

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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