Mobile Theme Issues

Hi @rehabyourself,

Thank you fro trying Hestia theme and sorry for the delay.

I checked your website and I think you want it to be like this with the header image visible: https://vertis.d.pr/i/yXoR7T

If that’s correct, here is CSS that you can add to Appearance->Customize->Additional CSS section to achieve the desired behavior:

@media only screen and (max-width: 991px) {
div#primary {
margin-top: 70px;
}
}

I hope it helps!

@bvytis apologize for the delay. That seemed to fix the background image for mobile devices. Is there a CSS that can be added to reduce the image size for the text+image blocks?

Hi @rehabyourself!

If you’d like to keep the image on the same row as the text for the media blocks on mobile devices, as seen here, you should add the code below in the Additional CSS section within the Customizer to achieve it.

@media(max-width:768px) {
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 50% 1fr !important;
    }
    
    .wp-block-media-text__content {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}

Have a nice day!

@luciamarinescu That seemed to work. Also how do I go about resizing the image/media that is part of text+media block for mobile only?

Hi @rehabyourself!

The code below should help achieve this.

@media(max-width:768px) {
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
width: 100px !important;
}
}

Have a nice day ahead!

1. is there a way to reduce font size on mobile?
2. Go to home page in desktop view. I put a sample of what I am looking for as image in block 1 position; for mobile only, is there a way to have a media-text block 2 columns (I see the CSS for this command), then shrink the image (understand the CSS for this command), yet have the text in column 2 continue beyond the image and wrap below the image column?

Hi @rehabyourself,

Since the initial issue has already been resolved, we will now be closing this thread. Kindly open a new thread for a different topic.

Thank you for your cooperation.