Jump to content

Reducing Size of Textbox

Recommended Posts

Hi there,

I am new to altering the CSS of my website so please forgive my poor explanation of my issue.

I have been messing around with the sizing of a slideshow and a small body of text which contains a button.

I have it looking how I want but for some reason the text box sizes seem to have large amount of empty padding and it is blocking my button from being clickable. I attached a photo which I hope shows what I mean.

Screenshot 2024-01-09 at 15.38.37.png

Link to comment

Looks like you have something funky going on here, what code are you using on the website?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

Looks like you have something funky going on here, what code are you using on the website?

.header-nav .header-nav-item--folder .header-nav-folder-content {
    min-width: auto;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: grey !important;
    transition-duration: 0.4s;
}
.header-actions-action.header-actions-action--social a:hover svg {
    fill: grey !important;
}
a#site-title:hover {
  color: grey;
}
.header-actions-action--cart .icon--cart:hover .icon--cart {
    stroke: grey !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    text-align: left;
}
.gallery-strips[data-width="full"] {
    padding-top: 1px;
}
/* Huge spacing */
section.products.collection-content-wrapper.products-list {
    padding-top: 1px;
}
@media only screen and (min-width: 641px) {
  #collection-62f1115a8cd4cc13a9dd2bb7 {
    #page .page-section:nth-of-type(1) { /*second second on the left*/
      width: 43%;
      min-height: 80vh;
      max-width: 900px !important;
      align-items: center;
      float: left;
    }
    #page .page-section:nth-of-type(2) { /*third section on the right*/
      width: 57%;
      min-height: 100vh;
      align-items: Left;
    }
    #page .page-section:nth-of-type(3) { /* forth section full width again */
      clear: both;
    }
    #page .page-section:nth-of-type(2) { /*third section on the right*/
      max-height: 500px !important;
      max-width: 900px !important;
      overflow: hidden !important;
      align-items: Left;
    }
  }
}

I'm fairly sure the issue is my own doing... If there is a better way to do it please do let me know!

Link to comment

I can't see the problem... if you remove the CSS and then try and adjust the block heights does that work? (make sure to refresh the page in between and save the code somewhere!)

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Where did you get this code? If it turns out to be a problem with this code you could try this plugin, I've not specifically tested it but everything that @WillMyers puts out is pure gold!

https://www.will-myers.com/products/p/split-screen-layout-design-pack

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
8 minutes ago, Ziggy said:

I can't see the problem... if you remove the CSS and then try and adjust the block heights does that work? (make sure to refresh the page in between and save the code somewhere!)

Yeah no issue when the custom CSS is removed. The code is an accumulation of things I have found on here over the past year or so. I have no idea what I am doing so it probably looks strange.

Link to comment
2 hours ago, Ziggy said:

Where did you get this code? If it turns out to be a problem with this code you could try this plugin, I've not specifically tested it but everything that @WillMyers puts out is pure gold!

https://www.will-myers.com/products/p/split-screen-layout-design-pack

Decided to give this plugin a go and it helped to some degree but I still have issues with placement and scale. for example the padding is huge, would you know how to alter this? New URL: https://www.calumstevenson.co.uk/commission-1

Link to comment

It looks like the gallery section has it's height set to L or 100vh.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
12 minutes ago, Ziggy said:

height set to L or 100vh

This section height is set in the section settings not in code.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, calumstevenson7 said:

You are a genius! Thank you.

Not really, I just know my way around Squarespace.

Can I give you this CSS to stop the header padding from shifting when you scroll (common issue):

.header .header-announcement-bar-wrapper, .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
    padding-top: 2.2vw !important;
    padding-bottom: 2.2vw !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I can see that! Also yes thank you again that is much better.

I can see now that the height in the section settings alters my space at the top but when set to what I am looking for it greatly reduces the size of the gallery slideshow. Is there a way around this?

Link to comment
12 hours ago, calumstevenson7 said:

Is there a way around this?

Possibly, try adjusting the vertical padding with this:

.gallery-fullscreen-slideshow[data-width="full"] {
    padding: 2vw 7vw;
}

The 2vw is the vertical padding (top/bottom) and the 7vw is the horizontal padding.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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.