Changing heading size to be separate on mobile and desktop on Dawn theme

[dominnows]

Hey guys,

I was wondering how I’d be able to change the heading size on my front page here on mobile to be different from the desktop. It seems that the size on the desktop reflects onto the mobile site and I when I go to the mobile view and change the size it changes on the desktop as well. How do I make it so that they’re independent from each other? It looks way too large on the mobile site but looks fine on the desktop.

[dominnows]

My store link is https://ourodyssey.co/

[PageFly-Richard]

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->/base.css->paste below code at the TOP of the file:

@media screen and (max-width: 767px) {
    .header__heading-link {
        padding: 0 !important;
    }
    .header__heading-logo {
        width: 250px;
        height: 100px;
        object-fit: cover;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[dominnows]

Hi @PageFly-Richard ,

Thanks for replying to me so quickly! I don’t think that code did anything but let me know if I did something wrong. I have a screenshot attached of the code added to the theme.

[PageFly-Richard]

Hi @dominnows ,

You can try use below code in base.css file:

@media screen and (max-width: 767px) {
    .header__heading-link {
        padding: 0 !important;
    }
    .header__heading-logo {
        width: 250px !important;
        max-width: 200px !important;
        height: 75px !important;
        object-fit: cover !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[dominnows]

Hi @PageFly-Richard ,

That still doesn’t really work. My heading for where it says “PERSEVERE COLLECTION” with the shop button is still way too large. I’m trying to get that to fit more closely to how it looks on the desktop.

[PageFly-Richard]

Hi @dominnows ,

You can try below code:

@media screen and (max-width: 767px) {
    .banner__heading {
        font-size: 24px !important;
    }
    .banner__buttons a {
        max-height: 40px !important;
        min-height: 40px !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[dominnows]

Thank you @PageFly-Richard for this solution! You’re the best.

[dominnows]

Hi @PageFly-Richard ,

Do you happen to know how I can move the banner heading and button to the top of my image on mobile like how I have it on my desktop view?

[PageFly-Richard]

Hi @dominnows ,

Sorry for the late reply.

I currently check your website has a password page, so I can’t give you the exact solution.
Can you share the password so I can check it?

Thanks you!

[dominnows]

PW: persevere.

I’ve got the mobile layout fixed with a code someone provided me with. However it has affected my desktop view, how do I make it so that they are independent from each other?

[PageFly-Richard]

Hi @dominnows ,

I checked it seems on mobile you have already adjusted, right?
On the desktop if you want to adjust to the top, you can add the code below to the file base.css:

@media screen and (min-width: 992px) {
    .banner__content .banner__box {
        padding-top: 0 !important;
    }
}

NOTE: you can increase the padding-top value to match your website

I hope it would help you
Best regards,

Richard | PageFly