Hello community!?
I am currently building my product page, and I’m trying to remove the white space between the header and product image (mobile view).
Look at the images below for a visual presentation of what I’m looking to do. I’m using the Focal theme.
I am also trying to remove the space here (desktop view).
Store URL: https://fitody.com/products/smart-jump-rope
Is this possible to do that?
Thank you so much for your help!
Happy to help you:
.breadcrumb {
display: none;
}
You can add some margin-top to display it clean
.product.product–thumbnails-bottom {
margin-top: 10px;
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
@Savior Thank you so much for your help!!
Can I just can add some margin-top to desktop view?
Yes. But I also want to keep a little space on the desktop view.
Add margin under this
@media only screen and (min-width: 1025px) {
.product.product--thumbnails-bottom {
margin-top: 10px;
}
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
@Mathildew
Add this code on above of the theme.css file.
.container {
margin-top: 10px !important;
}
Thank you.
Have a good Day.
@Savior this is great! it works!!
Can I do the same thing for the product description as well?(desktop view)
Is this possible to make the content break out of the container and full width?(desktop view)
Thanks a lotttttt!!
For that you use Different code.
Where is this? Would you share me the page link.
Thank you.
No as it wrapped under Product tabs >> https://prnt.sc/229gkob so you have increase the width of whole width like this >> https://prnt.sc/229gs9v
@Savior is there any way to increase the width of whole width of the Product tabs?
Please add this >> layout >> https://prnt.sc/229k0qr
@media only screen and (min-width: 1000px) {
.product-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
.product-content__tabs {
width: 100% !important;
}
}
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
@media only screen and (min-width: 900px) {
.product-content {
margin-left: 0 !important;
margin-right: 0 !important;
}
.product-content__tabs {
width: 100% !important;
}
}
@Mathildew
Don’t remove the Gap its according to the proper Alignment. If you remove it can’t look much better.
I will Suggest you to remain their.
Thank you.
add this >>
@media only screen and (min-width: 1200px) {
.shopify-section--product-content .container {
max-width: 100% !important
}
}
removing all the space will not look good so there should be some padding
also please search for this >> https://prnt.sc/229q280 and make its value to 0 >> margin: 0;
@Savior sorry I can’t see the image you sent 
is it some coding?
@Zworthkey I’m just trying it out 
thank you!