Removing blank space on product page between image and description on mobile (vajb.shop)

[Maya-vajb]

Hello, I am using Fastor-v5 theme.

The product page looks fine on desktop view, but it needs to be fixed on mobile.

Here is the link:

https://vajb.shop/products/skodelica-mamio-pop-art

On mobile there is too much space between the image and the description. How can i remove it?

Thank you for your answer

[StephensWorld]

Add the following coding to the bottom of your theme's main CSS file:

@media (max-width: 1024px)
.product-summary {
    padding-top: 0px;
}

@media (max-width: 767px)
.product-block, .product-info .product-center, .product-info .product-image {
    margin-top: 0px;
}

Let me know if that works! 🙂

[PageFly-Richard · Accepted solution]

Hi @Maya-vajb 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width:767px){
.product-summary {
    padding-top: 0 !important;
}

.product-block, .product-info .product-center, .product-info .product-image {
margin-top:0 !important;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Maya-vajb]

Thank you so much! This fixed it! 🙂

[StephensWorld]

@PageFly-Richard posts an almost exact duplicate of what I post ... and then @Maya-vajb marks as solution. Very interesting. 

[BrainStation23]

@Maya-vajb 
You can follow these steps to achieve your result 

 Go to Online Stores > Themes >Edit code ->theme. liquid file

and paste the code above the </head>

<style>

@media screen and (max-width:768px){
  .product-summary {
    padding-top: 0 !important;
  }
  .product-block,
  .product-info .product-center, 
  .product-info .product-image {
     margin-top:0 !important;
  }
}
</style>

[Huptech-Web]

Hello @Maya-vajb , Add the following CSS to the theme.liquid. 

<style>
@media screen and (max-width:767px){
  .product-images-wrapper .product-single__media-group {
    margin-bottom: 0;
  }
  .product-summary {
    padding-top: 0;
  }
  .product-summary .product-center {
    margin-top: 0;
  }
}
</style>