Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points

How to line up the registration form on home page

So I have this site that on the home page displays a registration form but then after a breakpoint of ~1425px it goes away.

I want to be able to change this, so the registration form stays next to the main image and text. But so that it keeps the header, and main image and text in align with each other. Until a mobile view breakpoint.

At the moment I keep having difficulties as the registration form, just keeps going underneath unless I make the width really small.

Is this possible

2 Answers

Shane Oliver
Shane Oliver
19,950 Points

One of your many many many JavaScript files is changing the css position of the registration form.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi,

Thanks for the reply. Yes that js file, is for scrolling, so that when someone scrolls down a page, the registration form stays there.

However I am trying to move the container including the header to the left a bit, so that the registration form stays there until a mobile/tablet view breakpoint.

But if I try and keep the registraition form in view it messes with the container.

Shane Oliver
Shane Oliver
19,950 Points

It can't move left, it is as far as it can go. The reason it looks like it isn't flush with the image is because the images container is 1170px wide but the image is 1000px and you have declared img: max-width: 100% in at least 5 places in your css. Change the image size it self to 1170px to fill the container or change the css to width instead of max-width and remove height auto