'Move picture when opening from phone

I am trying to build a web page by using this guide, but I would like to make it possible to use it from phone. It kind of works, but I would like to move the picture from the side to the bottom only if it does not fit... Here are some screenshots. In the first one, you can see the page when loaded from PC. It is at it should look. In the second one, I adapted the resolution to a phone ones, but the image just disappears. Is it possible to move it down, or elsewhere but make it appear? Thank you From PC From Phone

javascripthtmlcss


Solution 1:[1]

You need to set:

.wrap-login100 {
display: flex;
flex-wrap: wrap;
}

As long as your image has a fixed width, as soon as the viewport will be less than img width + form width, the latter element will be moved below the first one.

Solution 2:[2]

Frist, define your default page-container layout. Second, make your image responsive:

page-container {
max-width:1200px;
margin:0 auto;
}

#main-pic {
/* make images responsive */
max-width:100%;
height:auto; /* auto-calculate height based on width */

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kamran qureshi

Related Questions