tuanphan

Which page you want to add second instagram?

On 4/9/2023 at 7:04 PM, RodyHuy said:

Hello Tuanphan

Thanks for the script. It works except there is a grey area at the top of the video when looking at a mobile (see attached image). Can you have a look?

The video for mobile is on Vimeo (https://vimeo.com/815994215)

Best

Rodolphe

 

Try this new code

@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child figure {
    transform: unset !important;
    top: 0 !important;
    bottom: 0 !important;
}
body.homepage .Parallax-item:first-child iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#videoss23 {
    min-height: unset !important;
    height: 250px;
}
body.homepage .Parallax-item:first-child {
    height: 200px !Important;
}
}

Choose this

1 hour ago, aina said:

Hi! 

Thank you so much for your answer! 

#1 Meaning than when you click on the image, the next one appears, no arrows or new pages opening.  

Something exactly like this: https://gemmapenyaferrer.com 

I think we can add Slideshow, enable arrows, then we will use code to make arrows cover slideshow (and use code to hide arrows then)

5 hours ago, nickgardner400 said:

Hi @tuanphan I am also trying to figure out how to make my homepage images only play when hovered. Could you explain how I need to go about doing this in Square space? I can send u my website. I just want the images to be still until you hover over with curser. thank you

my portfolio

https://www.nickgardnerportfolio.com/

 

what I want it to do

https://www.steptstudios.com/

Ideal here is hover on each item >> replace current image with a gif or video (with code)

If you have 19 items, we will need 19 code

If you still want to do this, let me know, we can give the code

5 hours ago, Krayz said:

I'm also having the same issue here. Did anyone find a solution?
The first video on this page has the same problem: https://krissp.work/unlock

Can anyone help?

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1680770527734_7512>div>div {
    overflow: hidden;
}
div#block-yui_3_17_2_1_1680770527734_7512>div>div iframe {
    left: 1px !important;
}

15 hours ago, LocalYokels said:

Hi @tuanphan thanks so much for reaching out! My site url is https://www.localyokelstrading.com/shop-all

You mean keep this when scroll down?

With Campaign 360 section, try adding this to Design > Custom CSS

.fe-642aee39d8daa5103bf5a3fd {
	row-gap: 0 !important;
}

On 4/10/2023 at 3:11 PM, kinguyen said:

Hi @tuanphan can you help me as well for my site please? I also would like to keep the video background playing on the desktop but switch to an image in mobile view. Thank you for your help. My site is: https://k-i.fi/ 

Add to Design > Custom CSS. Replace Pixabay image with your image url

/* video desktop image mobile */
@media screen and (max-width:767px) {
[data-section-id="633dc6e18d713b57d3e2ee1b"] .section-background>div {
    opacity: 0;
}
[data-section-id="633dc6e18d713b57d3e2ee1b"] .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2023/03/18/16/26/ha-giang-7860907_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
}

You can consider adding 2 slideshows, then share site url, we can give code to show 1 on desktop, show another on mobile

On 4/9/2023 at 6:16 AM, sjkwon said:

Thank you so much! Would I be able to use a similar Custom CSS to create the same black border around ALL images on different pages of the website (links below), please?  We would like to have border around all images of products with white background.

https://www.renamegoods.com/

https://www.renamegoods.com/shop/p/ummm-errrr-ahhhh-eco-tote-bag

Use this new code

/* Shop image border */
.products.collection-content-wrapper .grid-item figure {
    border: 3px solid black;
}
/* homepage */
body.homepage a.grid-item {
    border: 3px solid black;
}
/* products */
div.ProductItem-gallery-slides {
    border: 3px solid black;
}

Add this to Settings > Advanced > Code Injection > Footer

This code will get ALT from Image & add ALT text under image

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
   $(function(){

   $('.gallery-item img[style]').each(function(){
       $el = $(this);
       var style = $el.attr('style');
       $el.attr('style','');
       $el.parent().attr('style',style);
    }); //Moves the inline styles

  $(".gallery-item img").each(function(){
            var title = this.alt;
          $('<div class="t-caption">'+ title +'</div>').insertAfter($(this).parent());
        });
 }); 
</script>
<style>
  #project .gallery .gallery-item {
    margin-bottom: 10px;
}
</style>

What is your site url? + Can you send all code in CSS box?

Change

_self

to

_blank

If you want this

Is there a way to open only blog post links in the same tab and keep social links and About link open in a new tab?

please share link to your site, we can check easier

Hi,

Can you share link to page? We can check easier

14 hours ago, IdaJohansson said:

This does not work.

What is your site url?

Hi,

Can you share link to page where you added text? We can check easier

Add to Design > Custom CSS

.Header-nav-inner {
    position: fixed;
    left: 3vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}
a.Header-branding {
    position: fixed;
    left: 3vw;
    top: 20px;
    z-index: 999999;
    padding: 0 !important;
}

17 hours ago, jreevesNPAC said:

www.npacgreeneville.com

Try accessing this link & check again

https://www.npacgreeneville.com/config/safe

Hi,

Can you share link to a blog post? We can check easier

Hi,

This is possible, but first

Have you tried Cover Page yet?

Hi,

Pagination is Heading 2, so you can adjust it in Design > Site Styles

Or you can also add this code to Design > Custom CSS

h2.item-pagination-title {
    font-size: 16px !important;
}

On 4/10/2023 at 12:35 AM, CMA said:

I have exactly the same problem. When I display the landing page on sqaurespace itself, everything looks ok. If I visit my website via a web browser without using my squarespace account the Landing page image is way too big. I have also tried resizing the image, made no difference. I asked friends to view my page and it always looks too big for them also.

I did try your code tuanphan, did not make a difference unfortunately.

Any help, solutions or advice would be appreciated.

Can you share link to your site?

You can add this code to Page Header (page where you want to change site title/nav color)

<style>
  a#site-title, div.header-nav-item a, header#header svg {
    color: #f1f !important;
}
</style>

When you add an event, enter url in this