In my product page, there is a big white space gap between my product images and my product title

[Solair]

In my product page, there is a big white space gap between my product images and my product title on mobile. Is there any way to lessen that space so the product title can be seen seemlessly along with the product? I am using debutify theme. Here is the store link: www.solairhome.com I am referring to the product: Solair Racerr Pro.

 

[BSSCommerce-HDL · Accepted solution]

Hi @Solair ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
    @media screen and (max-width: 750px) {
   .grid__item.product-single__meta--wrapper.large--six-twelfths {
     margin-top: 0!important;   
    }
}
   
</style>

 Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B]

@Solair,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.scss.css.

Step 3. Add this code at the end of file 

@media only screen and (max-width: 768px) {
 .grid__item.product-single__meta--wrapper {
   margin-top: 0px!important;
 }
}

Result:

If it helps you, please like and mark it as the solution.

Best Regards

[Dan-From-Ryviu]

Hi @Solair 

Please add this CSS code to the Custom CSS in Online Store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
.product-single__meta--wrapper { margin-top: 0px !important; }
}

[BSSCommerce-HDL · Accepted solution]

Hi @Solair ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
    @media screen and (max-width: 750px) {
   .grid__item.product-single__meta--wrapper.large--six-twelfths {
     margin-top: 0!important;   
    }
}
   
</style>

 Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Solair]

Thank you. You are quick and thorough!

[BSSCommerce-HDL · Accepted solution]

You're welcome. Have a nice day!

[Sweans]

Hi @Solair ,

You can fix the issue of white space between the product media and title by reducing the margin between the sections. To fix this issue, you need to edit the CSS code of your theme

1. In Admin Dashboard -> Online Stores -> Click "..." alongside your current and choose "Edit Code".

2. In Edit code, search for "theme.scss.css" file.

3. In "theme.scss.css", You'll find the following code at line - 9212

@media screen and (max-width: 769px) {
  .product-single__title {
    font-size: 28px; } }

4. Replace the above code with the below given code:

@media screen and (max-width: 769px) {
  .product-single__title {
    font-size: 28px; } 
  .product-single__meta--wrapper {
  margin-top: 0px; }
}

5. Save the file and refresh your product page.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans