Solved

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

Maya-vajb
Visitor
2 0 0

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

 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4241 959 1608

This is an 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>

PageFlyRichard_0-1710293099624.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

StephensWorld
Shopify Expert
1331 155 325

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! 🙂

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

PageFly-Richard
Shopify Partner
4241 959 1608

This is an 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>

PageFlyRichard_0-1710293099624.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Maya-vajb
Visitor
2 0 0

Thank you so much! This fixed it! 🙂

StephensWorld
Shopify Expert
1331 155 325

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

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

BrainStation23
Shopify Partner
262 43 42

@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>
Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

Rishihuptech
Shopify Partner
430 73 77

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>

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required