tuanphan

16 hours ago, azaslona123 said:

hi @tuanphan it's all understandable but I have 8 logos and squarespace doesn't let me create more than 6 columns. Do you have any solution for that? 

 

Also, I tried with 6 pictures with this code and following your instruction and it doesn't work. 

the website is: 
www.toleasing.pl 

You mean this section?

#1. Number of Columns is not affected. Whether you choose 3, 6 or 8, the code will convert all to one line scroll.

#2. I see you used incorrect ID

You can use this to Custom CSS box

.products.collection-content-wrapper .ProductItem-gallery-slides-item-image {
	object-fit: contain !important;
}

@missgray Use this code to Custom CSS for mobile size

@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line, .ProductItem .ProductItem-details h1.ProductItem-details-title:first-line  {
    font-size: 30px !important;
}
}

On 6/24/2024 at 9:28 PM, NewtonDesignCo said:

Thanks!  Yes so here is a good example: https://www.newtondesign.co/timmy-shot-me

You'll see on desktop computers, or android mobile devices the start in the scrolling header renders as it should. But when you look on an iOS device, apple swaps that for a horrible emoji! lol.

I've had a chat with a friend how says it's probably not possible to fix.  So it might very well be I need to just remove the star shape which will be a shame.

I've put in a request for the ability to add an image to the scrolling bar, then we can add our own custom symbols etc.

You can try this approach to add icon to Scrolling Block

On 6/24/2024 at 6:27 PM, hayleykimstudios said:

@tuanphan this works but also changes all of my H1,H2 and H3 fonts across the whole site 😞 

Remove the code & use this new code

div.product-quantity-input *, .ProductItem-details .ProductItem-details-checkout [class*="variant"] * {
    font-family: "Neue-Haas-Unica-Medium";
}

If it still doesn't work, please share link to a product on your site, I can check code easier

On 6/24/2024 at 6:18 PM, Soona said:

Thanks! So here is my CSS so far (HTML already in the section) you can see what I got here. But as you can see ( https://www.goldensoulholistics.com/home-new ) the icons on both sides only fit the first link, and I would like them to adjust to the width of each link, if possible. Do you have a solution for that? 
Thank you very much 😉 

 

.game-start-links {
  text-align: center; /* center the links */
}

.link {
  display: block; /* make links block elements to stack them */
  margin: 20px; /* add some space between links */
  position: relative; /* for absolute positioning of icons */
  transition: all 0.3s ease-in-out; /* add a smooth transition effect */
}

.link:hover {
  /* add the icon frames on hover */
  padding: 0 15px; /* add space for the icons */
}

.link:hover:before,.link:hover:after {
  content: ''; /* add an empty content to create the icon frames */
  position: absolute;
  top: 0;
  width: 25px; /* adjust the width to match your icon size */
  height: 100%; /* make the icon frame full height */
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794a48ef95203740740c1a/1719224904594/Icon-Game-left.png'); /* add the left icon */
  background-size: contain;
  background-repeat: no-repeat;
}

.link:hover:before {
  left: 0;
}

.link:hover:after {
  right: 0;
  background-image: url('https://static1.squarespace.com/static/65413b3902773a145da0729b/t/66794d4b4f07162c0d039924/1719225675464/Icon-Game-right.png'); /* add the right icon */
}

 

I think it already show fine on all three texts. Did you solve it?

On 6/24/2024 at 5:16 PM, sina-airee said:

@tuanphan Yes, exactly!

My ideal is add some more items after "Shop" item

Then I will give code

• hide these items on desktop
• show them on mobile, and make them move a right a bit so that it looks like a child item of the Shop

On 6/24/2024 at 6:22 AM, PerfectCaptureBooth said:

I am trying to do something like this on my page : Perfectcapturebooth.com/backdrops

When they click "Premium or VIP" i'd like the content changing, rather than a whole entire new page loading

You can follow this approach

I remember the page doesn't install Filter on June 19 (or you have problem so Filter doesn't run on that time)

Now with filter plugin, page source code changed so it won't work. You can follow code in top comment again, replace corresponding url in (3) and (4).

Yes. We can use CSS with FontAwesome Icon to do this. Can you check url again? It doesn't work.

Hi,

The page url doesn't exist. Can you check it again?

You can follow this new guide (instead placing image behind text, you can drag image to right of text.

If you still can't make it work, you can share link to page where you added text/image, I will check & give exact code for your site.

On 6/24/2024 at 5:05 PM, Tlwes said:

Hi, 

I would love to know if its possible to reduce this dead space below the 'slideshow: reel' when captions are turned on. 

I have also used the CSS to move the caption up onto the bottom of the image, but there is now plenty of space below where the caption once was

Thanks!

 

If you share link to page where you use Reel, we can check easier.

18 hours ago, DebbieSapsed said:

snow - Dave Newbould Photography (squarespace.com)

pwd: origins

I've sorted getting rid of the bits or description but I'd rather the landscape images were as wide as the portrait one is high.

To increase image size, use this to Custom CSS

.sqs-search-page-item .sqs-main-image-container {
    width: 38% !important;
}

20 hours ago, one-over-four said:

It should now work @tuanphan, once cache has been cleared.

I see you used this code & it already work

You can use this to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

section#mtn {
    min-height: unset !important;
    height: 160px !important;
}

section#mtn * {
    font-size: 16px !important;
}
}

You can use my code, just replace with your font name

You can use Gallery Section Grid with 3 items. Add some text & share page url, I can give you hover code

I see it shows fine here

In case you want to target specific images, we can add a specific text to ALT, then target them, if you want this, I will give code.

Use some code like this

div.button-block a {
    position: relative;
    width: 200px;
    height: 80px;
    overflow: hidden;
    background-color: #522d5b !important;
    clip-path: polygon(
    0 20%,
    10% 0,
    90% 0,
    100% 20%,
    100% 80%,
    90% 100%,
    10% 100%,
    0% 80%
  ) !important;
    color: #fff !important;
    border-radius: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

On 6/23/2024 at 4:22 AM, cmiller said:

Wow!  Thank you so much!  Is it possible to add code for this section to do the same thing:

 

 

You can enable button then use this CSS code

section[data-section-id="665fd250c388e16e8dec6849"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}

On 6/18/2024 at 8:47 AM, StumanPhotog said:

Hi,

It's https://www.stuartmcandrew.com/

 

thanks

You try this code to Website Tools (under Not Linked) > Custom CSS

div#canvasWrapper {
    max-width: 100% !important;
}

@silviasqaurespace You can use this CSS code to add a space

@media screen and (max-width:767px) {
.product-details.pdp-details {
    margin-top: 100px !important;
}
}

On 6/23/2024 at 5:45 PM, sheridanckai said:

I'm trying to figure out how to change the gallery reel arrows to a solid triangle , does anyone know how to do this?

thank you

You can use this code to Custom CSS box

button.gallery-reel-control-btn svg {
    display: none !important;
}
button.gallery-reel-control-btn {
        background-size: contain;
        background-repeat:no-repeat;
        background-position: center center;
        opacity: 1 !important;
        padding: 30px !important;
}
.gallery-reel-control-btn::before {
    background-color: transparent !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/iconmonstr-caret-right-filled-240.png.8651401bdea275af339bab793f6c309b.png);
}
button.gallery-reel-control-btn[aria-label="Next Slide"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/iconmonstr-caret-right-filled-240.png.8651401bdea275af339bab793f6c309b.png);
}

On 6/23/2024 at 10:44 PM, Gmm398 said:

You are amazing thank you so much! One last thing. When I added that, then my qty input box that I coded to be 50% to match the width of the other two inputs and my "add to cart" button now are slightly off when I change screen size... (at full screen they are in alignment), they are not responding exactly like the first to inputs. I tried making  all the boxes the same size by using percentages but that didn't work for the add to cart. It only responds to em or px? I tried making add to cart button is 30em and the others are 22em, but then they don't respond at all of course when I change window size. Anyway to get the add to cart and the QTY input to respond like the first two variants? 

Can you take a screenshot of problem?