Full page design and responsive

Hello, I are working on a web site design and I want to have a login/registration page like the Hubstaff example https://account.hubstaff.com/login I came up with this design (see attached) but it is not responsive like Hubstaff and I am trying to come up with a solution. Does anybody know how can I fix this in order that the form on the left remains of a same size? Thanks

I know there is bootstrap up to 1140. But I want to have the design cover the entire page. Not just in a container.

Hi MagikLair, I don’t understand what the pictures show compared to the login example you link to that is alone on the page.

The two posted pictures seems to show the forms to the left of the whole site with a wide space on the left?

I find it hard to picture the goal you have.

Could you perhaps link to your web site or post a working demo and explain what the solution would look like?

@MagikLair. It all depends on how and at what breakpoint you want it to become responsive? Can you profide us with the CSS you have sofar?

We could come up with a solution but if you have already written this page then it is unlikely our solutions would be a good fit for what you already have. Therefore wee need to work with your code in order to offer a specific solution.:slight_smile:

If you haven’t started coding yet then it looks to me as though you could split the screen 50/50 with the form on the left and image on the right. You would just allow the image to get smaller as the screen resizes (or background-size:cover) but keep the form at a suitable min-width within its 50% container. Once the screen is suitably small then lose the right image and center the form with media queries etc.

Flexbox should be able to maintain the form and image heights as required.

2 Likes

We can see how your design in intended to look on the large screen, that’s fine. But how would you like it to look on a small and medium sized screen?
If you don’t know that yet, it’s what you need to think about next. Only then can you work on how to achieve it. And if we know too, we can help.

3 Likes

First many thanks for all your replies. I’m working on a project and i hired a designer and a developer from 2 different agencies so i am trying to coordinate their work. So far we have the home page and some other inner pages like the About us pafe and also the registration pages (login, registration, reset password). All my pages are designed in 1140 and the two pages you see in the screenshots are the registration and login pages. I have said I would like the design to be full width like you see on the hubstaff.com login page example. He said to make them look nice the login and registration pages should be done in 1340 to get full width. So I’m a little confused. He also said the pages are fine if they’re all 1140 or if there are all 1340. The problem is that the registration pages also have a menu while you can see on Hubstaff the registration pages dont. I feel this is one of the reason because the page doesnt look good but the main problem i think is the form which is not responsive like the Hubstaff form. Any feedback you could provide would be greatly appreciated! Thanks for the help again.

Did he suggest what happens if your visitors are using a 1240px width monitor, as I am? Or they’re using a tablet, a mobile phone, or any other device which is less than 1340px wide?

As others have said, we can help you to create a responsive page, but we need to know how you expect it to behave at various widths. Clearly, the side-by-side design you have now with the form and image will not work on small screens.

The site you cite as an example is a very different design, and doesn’t provide any clues. We understand you want the design to cover the entire screen (even for those using very large, wide-screen monitors?), but to help you make it responsive, we need to know how you intend the design to adapt to varying widths.

Without seeing the actual code you are working with, it’s pretty hard to offer more than the general suggestions which have already been made. Do you have a test page you can link to?

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.