We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Overlapping on product description after moving the product header above the image (mobilia theme)

Solved

Overlapping on product description after moving the product header above the image (mobilia theme)

KcZyien
Excursionist
28 0 4

Hi, 

 

I am running into an overlapping situation on the product description after moving the product title above the product image only on mobile view. Can someone kindly provide a coding to help me solve this issue? The screenshots attached below are for your reference. Thank you. 

 

Shop URL: wallartfantasy.com

 

Screen Shot 2022-07-31 at 5.48.35 AM.jpg

Accepted Solution (1)

DavidEKim
Shopify Partner
393 131 203

This is an accepted solution.

Hi,

To adjust the description margin in mobile, you need to modify the Assets/styles.scss file. 

Please file the code below in style.scss (by Ctl+F for search within the file after open, and type & find .eight.columns.omega>div).

 

 

 

@media only screen and (max-width: 749px)
.eight.columns.omega>div {
    margin-top: -37px!important;
    padding: 10px!important;
}

 

 

You should change the

 

margin-top: -37px !important; 

 

to

margin-top: 0 !important;

from the above code.

 

margin-top: 0 !important;

from the above code.

 

 

If you have any questions, please let me know.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 2 (2)

DavidEKim
Shopify Partner
393 131 203

This is an accepted solution.

Hi,

To adjust the description margin in mobile, you need to modify the Assets/styles.scss file. 

Please file the code below in style.scss (by Ctl+F for search within the file after open, and type & find .eight.columns.omega>div).

 

 

 

@media only screen and (max-width: 749px)
.eight.columns.omega>div {
    margin-top: -37px!important;
    padding: 10px!important;
}

 

 

You should change the

 

margin-top: -37px !important; 

 

to

margin-top: 0 !important;

from the above code.

 

margin-top: 0 !important;

from the above code.

 

 

If you have any questions, please let me know.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
KcZyien
Excursionist
28 0 4

Thank you. It works !