Filtered page displays white/empty field

Site URL: https://xn--ernringsrdgiver-plbk.no/oppskrifter/category/middag

Hi,

I've creating a blog category filter, but when using the filter a white/empty field shows up above the footer. I suppose this issue might be solved when more blog posts are added, but a fix for now would be great.

Any help is highly appreciated!

Password is baretesterlitt

Answered your message.

Code for other members

/* Footer top space */
.blog-basic-grid.collection-content-wrapper {
    padding-bottom: 0;
}

Also, do you want to fix these problems?

Site URL: https://www.xn--ernringsrdgiver-plbk.no/

1. (Tablet/Mobile-Overlay) Change to another logo?

2. (Overlay Menu) Change button color?

3. (Tablet-Homepage) Change to 2 items/row?

4. (Tablet-Homepage) Change width?

5. (Tablet-Footer) Change left text width?

6. (Tablet-Ernaeringsradgivning) Change text width/size?

7. (Tablet-Oppokrifter) Change to 3 items/row?

8. (Tablet-Blog posts) Change content width?

9. (Tablet-Priser) Change text width, reduce padding?

Thank you, @tuanphan! 

Yes, all issues you found I would really appreciate a solution for.

Dear @tuanphan, it seems the code you suggested only made the white space/padding larger. Maybe I've misunderstood something?

21 hours ago, KristinaJ said:

Dear @tuanphan, it seems the code you suggested only made the white space/padding larger. Maybe I've misunderstood something?

I see no white space here?

It seems the white space is somehow only visible on 27" screen (even when scaling down the browser window), and not on 15" screen.

Also, I would love to get a solution for the tablet issues you found! 🙏

Thanks for all your help, @tuanphan

17 hours ago, KristinaJ said:

It seems the white space is somehow only visible on 27" screen (even when scaling down the browser window), and not on 15" screen.

Also, I would love to get a solution for the tablet issues you found! 🙏

Thanks for all your help, @tuanphan

Try adding to Design > Custom CSS

/* White field */
body.collection-type-blog-basic-grid.view-list {
	background: #3d4435;
}

With tablet, I will check after fixing white field problem

@tuanphanThank you, that solved the white field problem! Looking forward to your input on tablet issues.

Really appreciate your help!

16 hours ago, KristinaJ said:

@tuanphanThank you, that solved the white field problem! Looking forward to your input on tablet issues.

Really appreciate your help!

Q1. 2. 3. Add to Design > Custom CSS

/* change overlay logo */
body.header--menu-open .header-title-logo img {
    visibility: hidden;
}
body.header--menu-open .header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoth-4811285__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
/* Overlay menu button */
.header-menu-cta a {
    background: green !important;
    color: red !important;
}
/* Tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* 4 items to 2 items */
div#block-5e2dba9134b44d9e401d+.row .span-3 {
    width: 50%;
}
div#block-5e2dba9134b44d9e401d+.row .span-3:nth-child(2n+1) {
    clear: left;
}
}

Q4. Increase text boxes or collage box (image + text)?

Q5 - 9. I will check later

On 5/6/2021 at 2:28 AM, tuanphan said:

4. (Tablet-Homepage) Change width?

@tuanphan For the image collages I think the best solution would be to have same layout on tablet as mobile? 

On 5/11/2021 at 6:01 PM, KristinaJ said:

@tuanphan For the image collages I think the best solution would be to have same layout on tablet as mobile? 

Q7. It looks like you solved? I see 2 items/row here.

Q6, 8. Add to Design > Custom CSS

/* tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="60817e5d3393365de384aa0f"] .content {
    width: 95% !important;
}
/* blog content width */
.blog-item-inner-wrapper {
    width: 100% !important;
}
}

If it works, let me know, we will check Question 9