0
148
ViewsMove 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
2 answers
Answer question0
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.
0
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 */