Image Block Orientation Based on Screen Size

Site URL: https://www.drbitakhosraviannd.com/

Would anybody be able to help with this particular issue? I want to  have an image block display on specific orientation based on the screen size. Ex. phone view looks like this.

And this is how it looks on devices that are bigger than 687px. How can I change the orientation to make it look vertically and not horizontal. 

For reference. I would attached a direct link to the page in question.

Thanks

LINK: https://www.drbitakhosraviannd.com/about 

Hi,

It looks like you removed that section? I don't see it now

1. Hi @tuanphan,Its still there. I gave the wrong link. https://www.drbitakhosraviannd.com/nutritional-counseling.  Password: 3535R

The issue is mainly with devices that are in the 641px to 950px screen size range. I'm still trying to figure it out. Thanks for your help in advance.

2. Also, I have encountered another problem with a 1024px screen size. is it possible to wrap the text shown in the picture around the other two images?

Thanks for your help in advance.

Hi @tuanphan Would you be able to help with the questions above?

Thanks

On 5/5/2022 at 5:58 AM, Patus01 said:

Hi @tuanphan Would you be able to help with the questions above?

Thanks

 

#1. Try adding to Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-625f4ada1892c05f449cf60d img {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}
div#page-section-625f4ada1892c05f449cf60d h1 {
    font-size: 30px;
}}

Hi @tuanphan That works great but is it possible to move image above the text? I want to be able to display as one column. 
Thanks for your help.

3 hours ago, Patus01 said:

Hi @tuanphan That works great but is it possible to move image above the text? I want to be able to display as one column. 
Thanks for your help.

Use this new code

@media screen and (min-width:768px) and (max-width:991px) {
div#block-dd80801c79dc6242f5f3 figure {
    flex-direction: column;
}
div#block-dd80801c79dc6242f5f3 figure>* {
    width: 100% !important;
    margin-bottom: 20px;
}}

Thanks @tuanphan. Works great.