Position form after an image
I find it impossible to locate the form which is for booking a train after the parallax image responsively. I hardcode the position of the form but when the page is resized it looks ugly.
PS: The design of the form is not finished but I wanted to fix its location first and then finishing the design.
HTML: https://pastebin.com/DuAUuuSE
CSS: https://pastebin.com/iestPdYK
Thanks in advance!
Pastebin
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Pastebin
* { margin: 0; padding: 0; box-sizing: border-box; font...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
19 Replies
I would recomment putting your whole code in a codepen or github repo so people can help you and see it update in real time. it hard to just see the text without the live design . https://codepen.io
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
Here is the codepen link:
https://codepen.io/Georgi-Ginduzov/pen/vYbrExN
Perfect thank you
Your form is before the parallax div when I look at it. Maybe I’m misunderstanding your query, I thought you were saying you can’t locate the form ?
My laptop so looking at this on my phone and having a hard time understanding. Why did you set the parallax image to position absolute? If it’s being used as a bg image , why wouldn’t you just use it as a bg image on the parallax div?
You also have nowrap set on your form, which is the default. That doesn’t need to be declared. If you want the form to be responsive you could enable wrap or use a media query to switch the form container to a column at a breakpoint that makes sense.
I also don’t see the
.book-ticket div you’re giving a gap. None of the book-ticket classes have a child div. If you’re selecting the book-ticket class itself , you can just use the class .book-ticket . If you want to raise the specificity by including the element selector it would be div.book-ticket no space. The space means your selecting a child element within.
Also, align-content doesn’t work without declaring that your flexbox CAN wrap
I would also recommend not using ids for styling as it raises the specificity and turns into a huge issue to override, especially when combining with another selector. I’d suggest using ids when you need to for JavaScript but adding a class to the element too that you use to select to style it.Additionally, this is what I see when I open the menu on my phone. It’s impossible to see the menu . Raising the opacity of the background would be a good idea.
All of those notes should keep you busy 🤣
When I get back on my laptop I’ll try to refactor your code and leave comments on what and why.
Please let me know what you mean by “finding it impossible to locate the form after the parallax image responsively”(which I got confused because there seemed to be two elements with Parallax mentioned) I don’t think you need to
position: absolute the form. But I was able to locate/find the formWhat I meant is I can't locate it in the supposed place responsively which is after the parallax image because I am pursuing this effect:
I haven't used it as a background image because I wanted it to be shown only once at the beginning and I do not know how to make the image appear only once.
The parallax image is absolute because otherwise it was shown after the navbar although I wanted the image to be behind it and begin from the beginning of the page
I did not know that and fixed it
Additionally I can locate it like I want but it is not responsive because here's what happens when I change the page resolution:
And this is how it looks when I resize the window:
Do you mean by shown only once, the background image is repeating? You can use
background-repeat: no-repeat;
background-position: cover;
I meant to take a look at this when I was on my laptop and forgot. You have some heights set , so even though there’s no bg color on one of the elements, I think it’s pushing your form down. I’ll remember to take a look at this tmrw.
The form isnt actually being pushed down, its positioned absolutely. The conflicting heights you have declared and the image is causing the hero section to shrink. You also have a margin -top of 1000px on the main content green bg section which isnt helping things.
I have gone through and refactored everything , left notes for you. I hope you can learn from it as it took hours. Please read through and lmk if you have questions.
https://codepen.io/Miss-Fox/pen/GRzGYaB?editors=0100
Thanks for the useful tips and help. Much appreciated!
Let me know if you have questions or concerns about anything
I want to ask you how I can locate the book-train form to look like this from the example because I tried reallocating it by changing the top margin after your corrections but what happened is that the bg image height got more and more and the form stayed always in the image.
example:
This is the desired output
Remember, the margin and padding will create space/height. So when you added margin it created more height in the header element it’s in.
Use transform:translateY(x); where x is a number you find that pushes it down. You can also take out some of the padding bottom on header to make the bg image shorter. Depends how much space you want bw the hero text and the form
It worked!
Thank you very much
Awesome! So glad to hear that. By the end of this project you'll have learned a ton! That's what I appreciate about challenges and projects. You learn something new every time! If you want more practice I recommend cssbattle and icodethis.com . Doing a challenge every day has improved my skills so much just over a couple of months!
I'll definitely check them up