White space obove and under collections on mobile version

[Antonynex]

Hello dear people, i had not yet have a solution for the extremly large white space above and underneath the collections section on my landings page on only the mobile version ( on desktop it seems to show right. See screenshot.

Does someone have a soluyion or code for this one pls? Verry mutch appriciate it.

Website nexifox .nl

Pasword: ZrQ367Jg;

[Antonynex]

By the way here is the screenshot of the problem

 

[Arif_Shopidevs]

Hello, 
The problem occued for the .banner CSS. If you add this CSS in your store front custom CSS the issue will solved

@media screen and (max-width: 749px) {
 .banner {
  height: 250px; /* Adjust the height as needed for desktop */
  object-fit: cover;
}
}

Let us know your issue is solved or not.
If it is solved. Mark the post as solved and do not forget to like our solution.

Thank you

[Antonynex]

Ok, where exactly do i have to put in the code ? In the banner.css or the custom.css  ?

[Antonynex]

I have video-banner and image-banner.

 

 

[Antonynex]

I guess you mean this part ?  But, if i make it 250px the video banner height does not show fully. 

 

[Antonynex]

I tried to implement it but then it does not show my banner fully on mobile and desktop and stil i have a lot of white space below the collections section to 

[Arif_Shopidevs]

If you made 219px the video will show fine. You can add this bellow CSS which will remove the space above featured product.

@media screen and (max-width: 749px) {
 .banner {
  height: 250px; /* Adjust the height as needed for desktop */
  object-fit: cover;
}
div#collection-template--24016398909780__featured_collection {
    padding-top: 10px;
}
}

If you want more control in top banner you can follow this article to use app easily to create banner https://shopidevs.com/how-to-add-a-banner-on-shopify/
Let me inform your issue solved or not. 

[Antonynex]

I don't understand the part of 219px the video wil show fine. Do i jave to remake the video in 219px or do i have to change the 250px in de code to 219px ? Cause my video is 1920 x 1080 and anything below  750 height it wil cut off a part of the video.  And where exactly do you mean by add this belos css ? In what file i have to put it and where ? 

[Antonynex]

Ok i have put the code in the custom css and it shows ok for the most part, exept when i turn my mobile from vertical to horizontal the button appears to far downwords and overlaps the bottom of the videobanner how, can i fix this  pls ? See screen shot.

 

 

[Arif_Shopidevs · Accepted solution]

@Antonynex 

Can you try with this css

@media screen and (max-width: 749px) {
  .banner {
    position: relative;
    height: 35vh; /* Flexible height for different screen sizes */
    object-fit: cover;
    display: flex;
    justify-content: center; /* Centers button horizontally */
    align-items: center; /* Centers button vertically */
  }

  .banner .button-class { /* Replace .button-class with your actual button class */
    position: absolute;
    bottom: 10%; /* Moves the button up a bit */
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%; /* Prevents overflow issues */
    text-align: center;
  }
}