Dawn Mobile Product Page Layout - Can't Define Problem

Dawn Mobile Product Page Layout - Can't Define Problem

Juicebox
New Member
9 0 0

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:

 

IMG_9710.PNGIMG_9711.PNGIMG_9712.PNG

 

 

Replies 4 (4)

Juicebox
New Member
9 0 0

This is what I am trying to achieve. The first image is a slider:

 

IMG_9717.PNGIMG_9718.PNGIMG_9719.PNG

PageFly-Henry
Shopify Partner
1184 335 283

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Juicebox
New Member
9 0 0

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. 

Juicebox
New Member
9 0 0

Solved. I had some bad css in the sections main product file. I went line by line comparing to clean Dawn code.