Jump to content

tuanphan

Circle Member
 View Profile  See their activity

  • Posts

    65,713

  • Joined

  • Last visited

  • Days Won

    522

 Content Type 

Posts posted by tuanphan

    Resizing Embedded Youtube Video

    in Customize with code

    Posted

    On 2/14/2023 at 7:55 AM, BlueBayCapital said:

    @tuanphan sorry its taken so long I was out of the country and did not have access to reliable internet.  I'm back now.  So I added your code to the bottom of the CSS block where my youtube video is hosted.  Again I AM NOT a programmer so forgive the seemingly basic error, but this is what I am getting.  I add the code and all it does is show the code next to the video?  The code in the CSS block is as follows

    <center>
    <iframe width="720" height="415" src="https://www.youtube.com/embed/Y2aUvk9cPsA?controls=0&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    @media screen and (max-width:767px) {
        iframe[src*="youtube"] {
            width: 100% !important;
            height: 200px !important;
    }
    }

    Screen Shot 2023-02-13 at 7.51.51 PM.png

    Screen Shot 2023-02-13 at 7.54.22 PM.png

    Hi,

    Your Screenshot is Embed Block. But you need to add my code to Design > Custom CSS

    squarespace-add-css1-min.png

    How do you get the archive block to go over content instead of pushing it down?

    in Customize with code

    Posted

    On 2/14/2023 at 3:31 AM, pelanderson said:

    Hi @tuanphan I tried this on a Brine site and works well but sits just under the top of the summary block.  https://renfield-centre.squarespace.com/rooms/category/200   PW renfield  Is there also code to centre the archive block drop down? Thanks again, Pete

     

    Add to Design > Custom CSS 

    section.Intro {
    overflow: visible;
}
ul.archive-group-list {
    position: absolute;
    top: 60px;
    background-color: #faf9f7;
    z-index: 9999;
    left: 50%;
    transform: translateX(-50%);
}

     

    How do I hide navigation the menu icon on mobile devices?

    in Customize with code

    Posted

    On 2/14/2023 at 4:04 AM, DoomVintage said:

    Hey guys! This has been super helpful in removing the hamburger/double line upper R corner navigation from small devices/phones and when viewing from a computer. I recently noticed, however, that these nav bars still appear when I access my site on an ipad. Any thoughts on how to remove it from there as well? Thank you. www.doomvintage.com

    unnamed.jpg

    Add to Design > Custom CSS 

    .burger-inner {
    visibility: hidden;
}

     

    Full bleed background video for mobile but not desktop?

    in Customize with code

    Posted

    On 2/14/2023 at 6:41 AM, DCavallo said:

    Thank you. See below:

     

    .spacer-block {
         padding-top: 0!important;
         padding-bottom: 0!important;
     }

     .spacer-block .sqs-block-content {
          line-height: 0.0em;
            min-height: 0px;
       
        }
    .item-pagination {
      display: none;
    }

    a {
    text-decoration: none !important;
    }

    .sqs-block-content p a, .sqs-block-content p a:visited {
    color: GREY !important}

    .header-menu-nav-item a {
        font-size: 20.5px;
    }

    .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
        font-size: 1.03rem;
    }

    Can you keep code I sent in CSS box then send all code?

    Logo on Cover Page

    in Other

    Posted

    On 2/14/2023 at 12:17 AM, bonipops said:

    Hi Again!! Thank you for this, so if you take a look at my website you can see I have it on there. However, I notice it does not attach to the white box on the cover page, so it differs from computer to computer screen. How can I fix this? 

    image.png

    Don't remove any code in current code

    Add this to COver Page Header 

    <style>
  .sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] div.sqs-slide[data-slide-type="cover-page"] .sqs-slide-layer:not(.scroll) .align-content-center-vert:not(.scroll) .align-center-vert:before {
    top: -50px !important;
}
</style>

     

    Adding a clickable URL to a Text Box with Hover-to-Reveal

    in Customize with code

    Posted

    On 2/13/2023 at 11:02 PM, ennkay said:

    ut the code is not working for me - or I'm not exactly sure if I'm placing it correctly. 🙁 Would you mind helping me out?

    I have used the following code to make text appear over the image when hovering (but can't figure out how to make the entire block a clickable URL)

    @media only screen and (min-width: 640px){ 
    #block-a9eab1f1e8680f0bf40c{ 
    opacity: 0; 
    transition: opacity 1s 
    } 

    #block-a9eab1f1e8680f0bf40c:hover { 
    opacity: 1; 
    transition: opacity 1s 
    } 
    }

    Can you please advise on how I can add your code to this code? Or if I should remove this code altogether?

     

     

    Frame 1 (1).png

    Can you share link to this page? We can help easier

    Resizing buttons for mobile view

    in Customize with code

    Posted

    On 2/13/2023 at 9:56 PM, ebbah said:

    I am also wondering how to style this section so that the names doesn't get cut off in the bottom: 

    Same site and password.

    Skärmavbild 2023-02-13 kl. 15.55.23.png

    #1. Add to Design > Custom CSS 

    @media screen and (max-width:767px) {
div.button-block a[class*="sqs-block-button-element"].sqs-block-button-element {
    font-size: 16px !important;
    padding: 10px 20px !important;
    height: auto !important;
}
}

    #2. Name looks fine. Did you solve it?

    Resize Gallery Section for Mobile

    in Fonts, colors and images

    Posted

    On 2/13/2023 at 12:57 PM, emersonfielkecreative said:

    I was wondering if I could please have some help too!  No codes are working so far for resizing my gallery section for mobile so most of the image is displayed.

    Here's the link and password: farming2023

    https://www.randmfarming.com.au/harvest

    Cheers! 

    Add to Design > Custom CSS > Then save & reload the site 

    @media screen and (max-width:767px) {
.gallery-reel {
    height: 30vh !important;
}
}

     

    Summary Carousel Arrow

    in Code Blocks

    Posted

    On 2/13/2023 at 9:04 PM, Nancygallardo562 said:

    @tuanphan Thank you for responding to my message, I published the website for now and it should be live

    https://piccolo-antelope-5p6t.squarespace.com/you

    Add to Design > Custom CSS 

    /* Summary block custom arrows */
.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb98f9dae72f09a0ad46/1602145176384/arrow-right-testimonials-6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    background-image: url(https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5f7ecb8774815b7a1d7b677d/1602145159916/arrow-left-testimonials-6.png) !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    visibility: hidden;
}

    image.png.f6140951490ddfff82770f587eca5ce2.png

    Lottie .json animation as header logo

    in Customize with code

    Posted

    On 2/13/2023 at 3:49 PM, cade said:

    Hey Tuanphan

    Perfect. I added the code to the footer. It already works on this page:

    https://the-rop.squarespace.com/datenschutz

    Now I want to put it instead of the logo in the header as well...

    Note: There will be changes in the animation - is it easy to replace it?

    THX a lot and best regards

    Claudio

    Add to Last Line in Code Injection > Footer 

    <script>
  $(document).ready(function() { 
		$('div#block-yui_3_17_2_1_1675841487032_3184').appendTo('.header-title-logo a');
	});
</script>

    image.thumb.png.1b63e683bc1e33befaa2b8d205ec6731.png

    Center Align Portfolio Grid Simple Blocks

    in Customize with code

    Posted

    On 2/13/2023 at 3:47 PM, hannah.dossary said:

    Hey,

    I also have the same question, although ideally i want the css to affect the last row, no matter how many items are in the grid. It is a page that may change often so it wouldn't be great to have to go in and edit the CSS code every time new items are added to the grid.

    Site: https://uor.squarespace.com/talent (password: uor123)

     

    Thanks so much

     

    Add to Design > Custom CSS 

    @media screen and (min-width:768px) {
body#collection-6388a141e8549d5191e07363 div#gridThumbs .grid-item:nth-last-child(-n+2) {
    position: relative;
    left: calc(~"100% + 30px");
}
}

     

×
×
  • 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