I need to change the Image and heading size for the top section for mobile only

Store Design
,
1

I need to change the size of both the image and heading size in the top “image with text” section to small (in the theme editing) for mobile view only. On desktop the medium setting for image height fits but needs to be small for the mobile view. Same with the heading, medium fits on desktop but needs to be small for mobile.

Any help would be appreciated.

2

Hello @JW14

In Shopify Admin, you can go to Edit theme code, open the file base.css and add this code

@media (max-width: 749px) {
    .image-with-text__media-item {
        width: 80%;
        flex-grow: 0;
        margin: auto;
    }

    .image-with-text__heading {
        font-size: 28px;
    }
}

Hope it helps!

3

Thanks it’s worked perfectly for the text but the image size doesn’t seem to be changing on mobile view even if i change the values in that section of code.

4

Sorry, please try this

@media (max-width: 749px) {
    .image-with-text__media-item {
        width: 80%;
        flex-grow: 0;
        margin: auto;
    }

    .image-with-text__media {
        height: auto;
    }

    .image-with-text__media {
        height: auto;
        position: relative;
    }

    .image-with-text__heading {
        font-size: 28px;
    }
}