Blank space in desktop version showing for Dawn theme product page

Store Design
,
1

Hello,

I have added few sections in my product page through the default shopify product section. Here is the product link- https://sohumlinen.com/products/switchbot-smart-lock

In the desktop version of this section, there is a big blank space coming up for a section which I want to be visible only in mobile. To achieve this I had added the following code:

@media screen and (min-width: 750px) {
  .banner__media {
    display: none !important;
  }
}

This code removed the image from the desktop but it leaves behind a big white space. Can someone please let me know how to modify the code so as to not show the white space.

Thanks.

Screenshot 2023-07-07 at 4.47.24 PM.jpg
Screenshot 2023-07-07 at 4.47.24 PM.jpg2874×1134 32.6 KB

2

@SohumLinen

@media screen and (min-width: 750px){
#Banner-template--15944673067183__ee49e3e0-8f51-4434-9e7c-cddf15aa7b27::before{padding-bottom: initial !important;}
}

Please add the following Code

1 Like
3

Hi @SohumLinen

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (min-width: 750px) {

.cbb-product-page #Banner-template–15944673067183__ee49e3e0-8f51-4434-9e7c-cddf15aa7b27 {display: none;}

}

Regards,

San

1 Like