karan

You have to create your custom javascript for that.

Seems like overlay issue. change your code remove display flex. Create bottom corner image placeholder and change image upon hover. 

Hi Bhavik,

Ask your client to purchase Universal plugin from here;

https://www.squarewebsites.org/squarespace-plugins/p/universal-filter

Install it. If look doesnt match you have to customize according to your needs.

Make sure dont add vertically center line in logo and add line using css or js.

24 minutes ago, sovicdesigns said:

Here is the URL: https://aardvark-chimes-mnee.squarespace.com/

Password: hurst2024

Choose 4th or 5th layout in navigation and use CSS and JS to modify navigation layout according screenshot.
If its create issue reply again with screenshot we will sure help you.

@AmyWattonLeask
Add following code in custom-css at end of line it will create two columns and improve left-right spacing.
 

media only screen and (max-width: 767px) {
    section[data-section-id="654ccfd4ccc92d7d2807e5b2"] .user-items-list-simple[data-alignment-vertical="top"] {
        align-items:flex-start;
        grid-gap: 4vh 0 !important;
        grid-template-columns: 1fr 1fr;
    }
}

Hi @Juisafish ,

@tuanphan  wants to tell you that you have copy "custom-css" which you have added in custom panel of site which can be located in https://fanny-lelorrain.squarespace.com/config/pages/website-tools/custom-css page.

Also I can see there is typo error code in custom css. Look for code 

  content: “+“;

and replace it with 
 

content: "+"

Hi @Bardurm
I can check code in header.
 

<script src="/s/SpinningText.js"></script>
<script src="/s/rolltext.js">

Please remove code and add after following code. After making changes message me if its doesnt solve issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

I have windows PC I dont see issue. Its Mac glitch.

Hi @charles.dicarlo

Please share the demo page URL so I can review it and provide a solution.

@kmc87 Hi,
Add following code in custom css.
https://swimdevelopment.squarespace.com/config/pages/website-tools/custom-css

div#block-yui_3_17_2_1_1715781104237_12592 #sr-res-root {
    background-color: orange !important;
}

div#block-yui_3_17_2_1_1715781104237_12592 {
    display: flex;
    justify-content: center;
}

Survey says orange or red color best color for the effective book now buttons.
If you want to change it to red change text orange with red.
After adding code and save... edit page move code block bring it to center you will see color in center... it will make vertically center. 

Hello,

There is glitch when I edit the pages using Fluid engine. Glitch is spacing and alignment using Fluid engine. Its create extra spaces and alignment problem and is happens in both OS (Mac & Windows).  If I edit page using windows its works, but when I edit same page edit that I did on windows its doesnt show on Mac.

Any one have same issue? Is there any solution for this?

Hi kendral

There seems to be an issue with your About Us page that can be resolved by implementing mobile CSS code. However, it is important to note that if it's not properly addressed, the problem may persist. To align it correctly, custom work is required, along with an explanation on how to achieve it using the Squarespace mobile editor. If you are interested in paid assistance, please let me know.

46 minutes ago, rpzn6171 said:

I have been trying to modify my header and have been successful at removing the underline, bolding and changing the color on the active page but no matter what I do, I can't seem to remove the underline and bold the active page within the drop down. If I add any other code, it negates the code I've written. Any ideas what to do? 

 

The website is: https://www.thesqinstitute.com/

 

.header-nav a:hover {color: #D99B65!important;}

.header-nav-item--active a{background-image:none!important; font-weight:bold; color:#D99B65!important; }

.header-nav-folder-item a{
    color: black !important;
}

.header-nav-folder-content {
    left: 0 !important;text-align:left!important;background-color: #D3D3D3!important;
}

Thanks in advance!

Add to Design > Custom CSS

div.header-nav-item--active a + div>div.header-nav-folder-item--active .header-nav-folder-item-content {
    background: none;
}

4 hours ago, howharvey said:

I used HTML to pre-populate some data in a SS form, this was achieved using getelementID and setting the value of that text area/box. This code block still works BUT the second I click Submit, the data is deleted from the form.

What's changed and is there a workaround?

Share website URL. I will check it out issue.

Hi,

Could you please provide the URL of your website? I will review it and provide you with the necessary CSS code.

Hi,

Please share your website URL. I'll debug the issue and provide a solution.

On 5/31/2023 at 10:22 PM, jake98 said:

@karan THIS WORKED THANKS SO MUCH!

last request (promise)

is there code i can use so that i can have it one size on web and another on mobile? 

thanks 

Okay remove previous code I have sent for arrow size. Copy new code from below and add it.

 

#wm-back-to-top .btt-background {
    height: 60%;
    width: 60%;
}

@media (max-width:767px){
	height: 100%;
    width: 100%;
}

Hi,

Change width of iframe to width="100%" It will solve mobile responsive issue.

Here is the code 

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=10QuxzuB90p3JKR_7V1Bo98mGehHdOvw&ehbc=2E312F" width="100%" height="550"></iframe>

Hi @amberwavescreative Would it be possible for you to upload the mobile image in the custom CSS panel? Once you have completed the upload, could you please share the image URL with me? This will allow me to provide you with the necessary code to replace the existing mobile image.

12 hours ago, jake98 said:

thank you @karan is it possible to make the arrow slightly smaller?

 

your fix helped it being cut off! - so thank you

Add to Design > Custom CSS

#wm-back-to-top .btt-background {
    height: 89%;
    width: 85%;
}

Let me know if its solves size issue.

Hi Jake,

I kindly request you to share the website URL with me. By doing so, I will be able to provide you with the accurate code for implementing the desired arrow style.

17 minutes ago, jake98 said:

thank you so much for this @tuanphan - is it possible to make it a titchy bit smaller and for the top of the arrow not to be cut off?

 

thank you so so much for your help ❤️ 

Add to Design > Custom CSS

#wm-back-to-top{
min-height: 65px;
}

3 hours ago, msnyder said:

https://www.snydertv.com/

 

I've attached an example of what the mobile info bar looks like. It's only accessible on the mobile version of Squarespace websites. (It's the bar at the bottom with the call button, email, etc.)

Hi,
Currently Squarespace doesn't have option to show mobile info bar in desktop, But I can create custom code that shows like mobile info bar for desktop and mobile. If you interested let me know by private message.

On 5/28/2023 at 12:18 PM, HannahR said:

One of my clients would like the caption for an image to appear when it is clicked on and becomes enlarged. These are individual images, not galleries. Can anyone help me with code for that please? I am using version 7.1. Thanks!

Hi Hannah,

Greetings! I am here to assist you with adding captions to your images. If you'd like guidance, I can provide step-by-step instructions, or if you prefer, I can even write the necessary code for you. 

Looking forward to helping you!