tuanphan

15 hours ago, Francoff said:

Hi @tuanphan

I would like to insert phonecall and website link ?
Do you think thaht is possible ?

Regards,

You mean these icons?

• https://fontawesome.com/search?p=1&q=phone&s=solid%2Cbrands
• https://fontawesome.com/search?q=link&s=solid%2Cbrands

Hi. Your site is private

Don't remove any code in your current code. Add this to Design > Custom CSS

a.next-section {
    border: 10px solid rgba(255,255,255,0.5) !important;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
#page section:first-child a.next-section span {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
    top: calc(50% - 5px);
    border-color: rgba(255,255,255,0.5);
}

16 hours ago, MattyT208 said:

Both the height and width, if possible. 

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

16 hours ago, cjalvesf said:

Site URL: https://www.koolrenovations.shop/

Hi, This is the site, https://www.koolrenovations.shop/

I would like to view the banner with the normal size in the mobile version, is that possible?

Thank you.

You mean top slideshow?

Add to Design > Custom CSS

body.homepage figure.gallery-grid-item img {
    border-radius: 30px;
}

On 6/2/2022 at 9:49 AM, mnrdgz said:

Hi @tuanphan, 

I'm trying to recreate this on my site but this code doesn't seem to work. It might be because I'm not using a fullscreen slideshow.

 

Here is the site for reference: https://www.manerodrigues.com/work/alzhup

You have to scroll all the way to the synthesis portion. 

Slideshow Simple support Arrows + Thumbnails only

10 hours ago, Direlandsings said:

Perfect! Would you be able to help me with the code for that please? 

D

You need to add it first, then we able to check code

13 hours ago, GemmaT said:

Hi! I am having a similar issue with 7.0 template, @tuanphancould you possibly help out?

I would like the product images to be smaller so when on desktop, you can see there are thumbnails below without having to scroll down. 

here is a product page that shows the image too big 

https://www.gemmathorpe.com/prints-products/ginkgo

and here is a landscape image with a similar issue. Is it possible to reduce the space between the top of the images and the title on the top right? 

https://www.gemmathorpe.com/prints-products/the-li-river

Site22Sh&GTJC to access site 

Thank you! 

 

 

#1. Add to Design > Custom CSS

@media screen and (min-width:641px) {
div#productGallery {
    width: 35%;
}
}

#2. It is white space inside image

See this: 

10 hours ago, Tanna said:

On 7/13/2021 at 4:25 PM, tuanphan said:

Remove the code to hide it on mobile & add this to Design > Custom CSS > Then save & reload the site

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

 

Hi @tuanphan I tried this just now as I have a Gallery Section on my home page set to 

Slideshow: Full

Full Bleed

I need a full-width view on mobile, too but none of this code is working. Would you mind letting me know what I'm missing?

https://www.blackbirdboone.com/ 

pw: MEDSPA

Use this CSS

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

10 hours ago, mtamaccio said:

This works if I am in the "Simple" layout, but if I change it to "Full", I still have the default biggest heading text.  Do you know how to get into that?  Here is the page with "Full" selected.

https://www.thelocalslang.com/kids/p/kids-woodstock-streets-hoodie-gray

 

Full layout uses a different class name. Use this new code

h1.pdp-details-title {
    font-size: 30px !important;
    font-family: monospace !important;
    color: red !important;
}

Do you use any custom code? Have you tried remove them & check again? If still appear, can you share link to a blog post? We can take a look

I read your problem yesterday afternoon, and couldn't think of a good way.
Now checking again, I can't think of a way either.
The only way that I know is to create 2 layouts, and hide 1 on desktop, hide 1 on mobile. or create 2 pages, then show 1 on desktop, show another on mobile 😆

13 hours ago, Ferocity said:

@tuanphan Thank you for your help! It is close to being perfect : )!

It looks good on the mobile version but the desktop version is having some issues with how the navigation buttons and their dropdown menus are displaying (the menu words/buttons look like they have something on top of them and the button dropdowns are only showing as white boxes).

Let me know if you have ideas on how to fix the desktop display issues.

https://ferocity.co/blog/defining-your-brands-target-audience

Add this CSS under

body[class*="type-blog"].view-item a.Header-nav-folder-item {
    color: #c31214;
}

9 hours ago, TheBrattleboro said:

That is correct! Image with dark overlay and text overlay.

Try adding to Design > Custom CSS

/* Masonry hover */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

Hi,

Which text are you referring to?

9 hours ago, MattyT208 said:

How do I adjust my drop down arrow to look like Image_1? It currently looks like Image_2.

Code injection is currently this:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
    #page section:first-child a.next-section {
      padding-top: 70px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: inline-block;
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
    }
    #page section:first-child a.next-section span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 28px;
      height: 28px;
      margin-left: -12px;
      border-left: 8px solid #fff;
      border-bottom: 8px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-animation: sdb05 0s infinite;
      animation: sdb05 0s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb05 {
      0% {
        -webkit-transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
    @keyframes sdb05 {
      0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(-45deg) translate(-20px, 20px);
        opacity: 0;
      }
    }
</style>
<script>
    $(function() {
      $("#page section:first-child").append('<a href="#" class="next-section"><span></span></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

Can you share link to your site? We can tweak code easier

9 hours ago, ShuiFeng said:

There isn't a Checkout button yet, I've included a screenshot. The right side is how it looks now and the left side is how I want to create and align a Checkout Button (if possible).   

If you can add a text link in excerpt, then we can move it there

If not possible, let me know. We will need to use script code to add button

10 hours ago, sarah7 said:

Hi. I'm trying to reduce space between the search box and the product navigation on this page:

http://shreckhise.squarespace.com/products

Anyone have a code?

Thanks!

Add to Design > Custom CSS

/* Search box - navigation */
section.products.collection-content-wrapper.products-list {
    padding-top: 0px;
}
ul.nested-category-children {
    padding-top: 0px !important;
}

10 hours ago, Urzilli said:

1) I see, thank you anyway!

2) No, it doesn't let me add anything to the slideshow. Could we do it with maybe some codes?

Possible, which plan do you use: personal, business or commerce?

12 hours ago, MattyT208 said:

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

You mean width or height?

You can use rgba color

figcaption.image-caption-wrapper {
    background-color: rgba(0,0,0,0.25) !important;
}

12 hours ago, lloyd_spark said:

I'm trying to do something similar here. I'd like my site title to be "Spark Structures". So first word is normal, second word is bold. Any help would be much appreciated.

Site URL: bamboo-lizard-w5nd.squarespace.com
Password: spark

Thanks.

Add to Design > Custom CSS

a#site-title:before {
    content: "Spark";
    font-size: calc(~"(2.2 - 1) * 1.2vw + 1rem");
}
a#site-title {
    font-size: 0;
    font-weight: normal;
}
a#site-title:after {
    content: " structures";
    font-size: calc(~"(2.2 - 1) * 1.2vw + 1rem");
    font-weight: bold;
}

Hi,

Can you share link to page in screenshot? We can check easier

I faced same problem yesterday. Add this to Design > Custom CSS

@media screen and (max-width:991px) {
span.portfolio-hover-item-content {
    display: block !important;
}
}

Add to Design > Custom CSS

/* Stacked from 768px to 1024px */
@media screen and (min-width:768px) and (max-width:1024px) {
div#page-section-628d8a9bc73f3027778dd19f figure {
    flex-direction: column;
}
div#page-section-628d8a9bc73f3027778dd19f figure>* {
    width: 100% !important;
}
}