Hello,
I was messing around to get my desktop product page the way I wanted (still can
't get a gap between main image and product info container) and I messed up my mobile layout in the process. I’m digging through all of my code right now, but maybe someone can see an obvious issue? Even if I find the correct selector, I’m afraid it will break something else. Site is shopultrafine.com
.
Obviously, there is a HUGE main product image throwing everything off, I just don’t know how to correct this reasonably quickly without doing more damage. Thanks in advance 
Current:
This is what I am trying to achieve. The first image is a slider:
HI @Juicebox
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
div#ga-product_bought_together, ul.grid.product-grid.grid–5-col-desktop.grid–2-col-tablet-down {
padding-top: 0 !important;
margin-top: 0 !important;
}
div#vitals-tabs-placeholder {
margin-bottom: 0 !important;
}
.related-products {
padding-top: 0 !important;
}
h2.related-products__heading.inline-richtext.h1 {
margin: 0 !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Henry, thank you very much. Unfortunately, I don’t see a change on my device. When I inspect the page in Chrome set to iPhone 12 Pro (which is the exact phone I have) the page looks as desired. When I look on my device, no change. I’ve cleared cache.
Solved. I had some bad css in the sections main product file. I went line by line comparing to clean Dawn code.
