tuanphan

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 

On 4/8/2023 at 12:59 PM, Sophia_2050 said:

Thank you, I don't want all of the nav titles left aligned, just the sub menus aligned under the main nav title?  Does that make sense? 🙂

Thank you

You mean align dropdown to right a bit, to align with dropdown title?

Add to Design > Custom CSS

/* Mobile Overlay Menu */
.header-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-100%);
      will-change: unset !important;
  transition: transform 0.3s ease !important;
}
body.header--menu-open .header-menu {
  transform: translateX(0);
}

You mean

Instead of stacking like this

https://flatiron-demo.squarespace.com/#/i-flatiron/

it will show in grid like this

https://flatiron-demo.squarespace.com/

?

Hi,

I see you figured it out?

Hi,

Can you share link to product?

On 4/7/2023 at 6:12 PM, Kenza said:

I am having the same problem! If someone knows the answer (short of hiring a developer that would be great)!

If you share link to product, we can check easier

15 hours ago, RodyHuy said:

Hello Tuanphan

Yes,  I have the issue on the mobile. I tried one of the script but it is not working.

@media screen and (max-width:767px) {
[data-current-styles*='"backgroundMode": "video"'] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
[data-current-styles*='"backgroundMode": "video"'] {
    min-height: unset !important;
    height: 30vh;
    margin-top: 5vh;
}
[data-current-styles*='"backgroundMode": "video"'] .html-block * {
    font-size: 30px;
    margin: 0;
    position: relative;
    top: -25px;
}
}

 Can you help? Is it possible to have a dedicated video for the mobile version. I have 2 different videos I would like to use. Would I need a specific script?

Thanks

Rodolphe

 

Add to Design > Custom CSS

@media screen and (max-width:640px) {
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;
}
}

Where is second video?

Hi,

Can you share link to page where you use images?

And what should it look like: hover image > change opacity, add overlay or?