Jump to content

Need help with custom CSS

Go to solution Solved by Lesum,

Recommended Posts

Hello! I have 2 form fields that I would like to have side-by-side and make them different widths. Can anyone help me accomplish this? Thank you kindly! Susanne

Screen Shot 2024-06-10 at 10.03.16 AM.png

Edited by sstory
Added screenshot
Link to comment
  • Replies 24
  • Views 222
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted (edited)

@sstory Add the code under Website > Pages > Website Tools > Custom CSS

@media only screen and (min-width: 768px) {
#collection-6664a1e54d31851300010987 {
	.field-list {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	.form-item.field.email {
		width: 60% !important;
	}
	.form-item.field.number {
		width: 36% !important;
	}
	.form-item.field.email {
		margin-right: 4% !important;
	}
}
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@sstory Yes, it can be done with some custom code. You can add this code under Custom CSS panel:

@media screen and (max-width:767px) {
section[data-section-id="6664a1e54d3185130001098a"] .section-background img {
    visibility: hidden !important;
}

section[data-section-id="6664a1e54d3185130001098a"] .section-background {
    background-image: url("replace-with-your-image-url") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

You've to add your image URL in the code where I wrote 'replace-with-your-image-url'.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

You're awesome, thank you! I will be working on this site for a few days and will likely need more help. Would it be ok if on the days you help me, I buy you a cup (or several cups) of coffee at the end of the day instead of one at a time for each help?

Link to comment

@Lesum

For the mobile version of /splash, I'd like to show the header but not on the desktop version. Is that possible?

For /home is it possible to move the navigation below the hero image but keep it at the top for the rest of the site?

Link to comment

@sstory Here's the code to display the header on the splash page only on mobile:

@media screen and (min-width: 768px) {
	#collection-6664a1e54d31851300010987 #header {
		display: none !important;
	}
}

 

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
10 minutes ago, sstory said:

Regarding forms, is it possible to add and validate a zip code field?

@sstory I think it's possible. However, it would take some time and a lot of code to come up with a solution. I worked on something similar a while ago, validating user input for zip codes, but it was not for a form.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@sstory To move the navigation below the hero section only on homepage, first add this code under Website > Pages > Website Tools > Custom CSS:

@media only screen and (min-width: 768px) {
#collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode,.is-expanded) #header {
  position: sticky !important;
  z-index: 10000;
  top: 0;
  display: none;
}
#collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode) main .page-section:first-child {
  min-height: calc(100vh - 68px)!important;
}  
#collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode) main .page-section:first-child + #header {
  display: block;
}
}

Then the next block of code under Website > Pages > Website Tools > Code Injection > Header:

<script> 
document.addEventListener("DOMContentLoaded",function() {
  if (window.self === window.top) {
    const header = document.getElementById('header');
    const firstSection = document.querySelector('.page-section:first-child');
    firstSection.after(header);
}
});
</script>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.