Jump to content

[Bedford Template] Change index banner height to full and reduce content padding

Recommended Posts

Site URL: https://gapture.com/

2059820884_GAPUREQUESTIOM.thumb.png.28fc5b0180d0ca656ab3c3ed360cef1b.pngHello. I'm working on my web using Bedford template and I'm having trouble changing just the index home page banner height. It seemed to have cropped off my image. 

Also in the second image below, you can see two big padding spaces on left and right. I applied this code and it removed the space in "Services" page but not home page.

// Page Side Padding
 #page, #content {
 padding: 0px !important;
 max-width: 100% !important;
}

Link to comment
5 hours ago, gapture said:

Site URL: https://gapture.com/

2059820884_GAPUREQUESTIOM.thumb.png.28fc5b0180d0ca656ab3c3ed360cef1b.pngHello. I'm working on my web using Bedford template and I'm having trouble changing just the index home page banner height. It seemed to have cropped off my image. 

Also in the second image below, you can see two big padding spaces on left and right. I applied this code and it removed the space in "Services" page but not home page.

// Page Side Padding
 #page, #content {
 padding: 0px !important;
 max-width: 100% !important;
}

On index-page, the width is limit with max-width

.collection-type-index .page-content {
    max-width: 1220px;
}

image.thumb.png.664f58b5154ae6809a5d45d6649c098d.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@gapture I see "services" folder title has no hover effect. Do you want apply on it?

Edit your code to this (I added .folder-toggle into code)

#mainNavigation a::before, #mainNavigation a::after, .folder-toggle:before, .folder-toggle:after {
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    transition: all .35s ease;
    opacity: 0;
}

#mainNavigation a::before ,.folder-toggle:before {
    content: '';
    right: 0;
    top: 0;
    border-top: 2px solid #56a653;
    border-right: 2px solid #56a653;
    transform: translate(-100%,50%);
}

#mainNavigation a:after, .folder-toggle:after {
    content: '';
    left: 0;
    bottom: 0;
    border-bottom: 2px solid #56a653;
    border-left: 2px solid #56a653;
    transform: translate(100%,-50%);
}

#mainNavigation a:hover:before, #mainNavigation a:hover:after, .folder-toggle:hover:before, .folder-toggle:hover:after {
    transform: translate(0,0);
    opacity: 1;
}

image.thumb.png.a6ba23f0e195835d2807a0f05e5684f4.png

Some pages have very long content. You can consider adding a back to top button.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.