m10ki

Hello, I found some code to help shorten the height of the main rotating banner (and its contents - images + text) you can see here: https://www.karibuadventures.com/ In the image I attached it shows how it appears on a iPhone 13 mini. This is the CSS I am using: /* Change scale of image on main homepage banner */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="634d520073bf7876f8cb7c7f"] ul { min-height: unset !important; height: 50vh; } } @media screen and (max-width:767px) { /* Change position of text in main banner image and add shadow to text */ section[data-section-id="634d520073bf7876f8cb7c7f"] .list-item { padding: 10px 150px 30px 30px !important; text-shadow: 2px 2px 2px rgba(0,0,0,0.4); .slide-content h2 { font-size: 31px !important; font-weight: medium; } } } Any advice is appreciated!

Unfortunately no.

My client is unhappy with the load times for mobile usage on her website. I have reduced image sizes, and it's still not passing. I am now attempting to change the main banner images on certain pages to smaller images. For example, on the page referenced, I am using the code below (referenced from this site); however, it's not working. Could someone kindly have a look and let me know what I am doing wrong? Many thanks for considering my request. @media only screen and (max-width: 640px) { section[data-section-id="64a583d770414f55c2df2aa0"] #block-6561dc22af410a83fb81 { #page .page-section:nth-child(1) .section-background img { opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://images.squarespace-cdn.com/content/6345cf66a093cc730bf62cb5/ef3024cc-840c-46a3-a727-f28b8ba14365/Dominica_Victoria%2BFalls%2B1_karibu_adventures%2Bcopy.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center; background-repeat: no-repeat; } } }

I had to put in a redirect on a page on a website URL that was changed. I now see that a 307 redirect happens to an HTTP version of the new page instead of HTTPS. I'm unsure of why that happens or how to change that. The user eventually gets to the HTTPS version, but I’m unsure if that negates any benefit/effect the 301 redirect does. Can someone let me know if it can be avoided? Thanks!

I found a solution that works for me: A ".MOV" file would become desaturated apon uploading. When I converted it to ".mp4" the colour remained true to the original file.

Sure: https://ocelot-trumpet-4j83.squarespace.com/ password: lfc2023 This is my code: section[data-section-id="6524201cf483616e06792526"] .section-background { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2276.49 1642.45"><defs><style>.cls-1{fill:#5e683d;stroke-width:0px;}</style></defs><g id="Layer_2-2"><path class="cls-1" d="m.47,1642.45l-.47-.88c188.69-101.26,355.12-250.56,494.68-443.75,111.65-154.57,206.45-337.41,281.76-543.47,67-183.33,105.85-351.48,126.64-460.25C925.59,76.24,932.36.77,932.42.02l1,.09c-.07.75-6.83,76.25-29.37,194.15-20.79,108.81-59.65,277.01-126.68,460.41-75.34,206.14-170.18,389.08-281.88,543.72C355.85,1391.71,189.3,1541.11.47,1642.45Z"/><path class="cls-1" d="m936.72,1642.3l-.8-.59c109.05-147.73,207.75-325.96,293.36-529.74,68.49-163.03,128.8-342.69,179.25-533.98C1494.44,252.29,1522.29,2.5,1522.56.01l.99.11c-.27,2.49-28.13,252.34-114.06,578.11-50.47,191.34-110.79,371.04-179.3,534.12-85.64,203.86-184.38,382.16-293.48,529.95Z"/><path class="cls-1" d="m1309.79,1642.3l-.8-.59c109.05-147.73,209.18-325.96,297.6-529.74,70.74-163.03,134.19-342.69,188.58-533.98C1887.79,252.28,1922.43,2.49,1922.77,0l.99.14c-.34,2.49-34.99,252.33-127.62,578.11-54.41,191.34-117.87,371.04-188.63,534.11-88.45,203.85-188.62,382.15-297.72,529.95Z"/><path class="cls-1" d="m2011.85,1642.3l-.8-.59c46.98-63.64,90.12-140.43,128.21-228.23,30.48-70.24,57.82-147.65,81.25-230.07,39.91-140.34,54.83-247.98,54.98-249.05l.99.13c-.15,1.07-15.08,108.76-55.01,249.17-23.45,82.47-50.8,159.92-81.3,230.21-38.13,87.87-81.3,164.72-128.33,228.43Z"/></g></svg>'); background-position: center; background-size: cover; /* Adjust to your preference */ background-attachment: scroll; background-repeat: no-repeat; } I attached an image of what the SVG looks like - these four lines are supposed to be on the right hand side, behind the leaf.

Hi, that code does work for their svg image - but not for mine. I followed the same steps.

password: lfc2023 I am trying to use an SVG for the background image of the top main section of the homepage. Right now, you will see thin green curved lines on the right-hand side - a .png image placeholder to show what I want. I would like for it to be an SVG so it remains crisp. This is the code I propose using, but it does not work (I delete the .png file when I try to implement the code) section[data-section-id="6524201cf483616e06792526"].section-background { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3236.25' height='1367.35' viewBox='0 0 3236.25 1367.35'><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M1892.69.08s-105.14,997.13-932.69,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M2482.83.08s-108.53,827.55-586.74,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M2883.03.08s-135.66,827.55-613.88,1366.81'/><path stroke='#5e683d' stroke-miterlimit='10' fill='none' d='M3235.76,777.88s-58.46,356.62-264.54,589.01'/><rect y='1.43' width='3235.76' height='1365.46' fill='none'/></svg>"); background-position: center; background-size: auto; } Thanks in advance!

Thank you so much!

https://hexaflexagon-pear-a9sh.squarespace.com/contact Thanks

Password: appleton Hi, I'm looking to round the corners of the blue boxes in this form, curious if someone could have a look at my code below. Thanks! .form-wrapper .field-list .field textarea, .form-wrapper .field-list .field input { background-color: #e3fafc !important; border: 1px solid #fff !important; border-radius : 15px; }

Thank you, I appreciate it. That did the trick!

Shoot, I forgot to add that: https://hexaflexagon-pear-a9sh.squarespace.com/ Password: appleton

Password: appleton I am attempting to use a different background image in the top main header on mobile. You can see the image is in place (the small sliver below the curved divider and above the red section) - but it is behind the image I want to swap (and not housed within the curve). This is the CSS I am using: @media only screen and (max-width: 640px) {section[data-section-id="6477887b2644316cd6cb8ff4"] { background-image: url(https://static1.squarespace.com/static/6474e7fbb738031c56c23939/t/6490c63a6ca0e13bf8787392/1687209531282/Appleton+Home+Page+Banner+-+Mobile+test.png); background-size: cover; background-position: center; background-repeat: no-repeat; } } Thanks in advance!

Hello! Just wondering if anyone can help with this? Thank you!

Hi there, that's correct. It works; however, the content within doesn't scale/reposition properly - so the image remains the original size, and the text and arrows don't reposition within the new size.

I am attempting to decrease the home page's top full-screen gallery/carousel height in mobile view while maintaining a similar (or more zoomed-out) aspect ratio. I have played with this code: section[data-section-id="634d520073bf7876f8cb7c7f"] {@media screen and (max-width:767px) .slideshow-wrapper { height: clamp(0px, 56.25vw, 85vh) !important; } I don't want the exact aspect ratio - as the text overlay won't work. Thanks in advance!

Hi Wolfsilon, thank you for the quick response. The max height seems to have helped the other pages, but this page still is wonky - no matter how high I set the height to, it still does this (see attached). I think the reason why this page isn't looking great is that the amount of words next to the gallery is longer than the other pages. If I cannot convince my client to reduce the copy, do you have any other ideas? Thanks again!

https://www.karibuadventures.com/alta-valsesia password: karibu2022 I have a gallery section next to a text block section with the help of the below css code, however on narrow screens it make the section below cut in half and jagged. Any help would be appreciated to make these two sections align perfectly and not affect the section below. @media only screen and (min-width: 641px) { #collection-634893cc9a464a662fdca2b6 { #page .page-section:nth-of-type(5) { /*second second on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(6) { /*third section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(4) { /* forth section full width again */ clear: both; } } }

Bumpity bump bump