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

Site URL: https://gapture.com/

Hello. 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;
}

5 hours ago, gapture said:

Site URL: https://gapture.com/

Hello. 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;
}

On 12/24/2020 at 5:51 PM, bangank36 said:

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

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

Thank you! That worked perfectly. 

@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;
}

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