Dawn Theme - Fix Image Banner Desktop View and Size Chart on Mobile View

Shopify Discussion
1

Hi all,

In previous discussions, I was able to fix the image banner text and button on my home page to display above the image in the correct spot that I wanted for the mobile view. However, by adding that code it affected the view desktop view of the image banner text and button. Is there a way to make it so that these two views are independent from each other and won’t mirror each other?

Also, I added a table size chart and it looks fine on the desktop but on mobile it doesn’t look streamlined and I have to scroll over to the right to view the entire chart. Is there a way to have the size chart adapt to the view on mobile?

PW: persevere.

Size chart on mobile
Size chart on mobile1170×2532 145 KB

Mobile View of image banner
Mobile View of image banner1170×2532 192 KB

Desktop View of image banner
Desktop View of image banner2554×882 315 KB

2

Hi @dominnows

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

@media screen and (min-width: 992px) {
    .banner__content .banner__box {
        padding-top: 0 !important;
    }
}
@media screen and (max-width: 560px) {
    .product__description.rte table {
        max-width: 100%;
    }
    .product__description.rte table td {
        padding: 10px 5px;
        width: unset !important;
    }
    .product__description.rte table td:first-child {
        width: 100px !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

3

@PageFly-Richard you are the best! This fixed my desktop view and my mobile view is unaffected but this was under theme.liquid. Thank you!

4

Thank you for your response I really appreciate it! However, I was able to resolve my issue with the desktop view from Richard’s solution and found that using a different code for the size chart helped fix my issue here:

.rte table {
width: auto !important;
}

5

Hi @dominnows ,

Great! I’m glad that I can help. :blush: