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

Shopify Discussion
1

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.

2AA8ED32-641A-4299-9B40-5D31DA3AE618_4_5005_c.jpeg
2AA8ED32-641A-4299-9B40-5D31DA3AE618_4_5005_c.jpeg359Ă—780 44.9 KB

2

@Solair_1 ,

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:

BSSCommerceB2B_0-1723434396123.png
BSSCommerceB2B_0-1723434396123.png518Ă—944 178 KB

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

Best Regards

3

Hi @Solair_1

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; }
}
4

Hi @Solair_1 ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723435309080.png
BSSCommerceHDL_0-1723435309080.png384Ă—594 220 KB

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 :heart_eyes:

1 Like
5

Hi @Solair_1 ,

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; } }
  1. 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; }
}
  1. 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

6

Thank you. You are quick and thorough!

1 Like
7

You’re welcome. Have a nice day!