How do I make this immage text and heading change on screen resize?

[CodeingMAN]

I have this code

<div class="box1">
        <img src="\jwcodeme\assets\code_man_ban1.gif" width="50%" style="float: left;" alt="coding img unavailable or failed to load">
        <span>
            <h1>Fast, Efficient, and Secure</h1>
            <br />
            <p>My services are 90% <em>fast, efficient, and secure</em>
                the work we do should be good in all ways. HTML is my best
                while CSS is my second Javascript
                I am currently learning so that is fourth PHP is my last best.</p>
        </span>
    </div>

.box1 {
    font-family: Consolas, 'Courier New', monospace;
    display: flex;
    align-items: center;
}

.box1 span {
    margin: auto;
    margin-top: 0; 
}

.box1 p {
   font-family: Arial;
}

when I resize my screen this happens.

How do I make it so that when the screen changes to phone resolution it kinda does this.

(you don’t have to do this as it is kind of complicated.)

[manjupillai16]

Hi @CodeingMAN ,

Did you try media query? Got a jsfiddle which kinda does the same… i found the fiddle from the below link:

changing position of div on window resize

https://jsfiddle.net/pwzhd4em/1/

Hope this helps.

[CodeingMAN]

But how can I do it with my code.

[bbsmooth]

By using CSS media queries. We aren’t going to write the CSS for you. If you aren’t familiar with media queries you will need to do some studying to learn how to use them. Then give it a try with your code and if you get stuck you can paste your CSS in here and we can help you.