Worst coded landing page - positioning is my worst nightmare

Hello

I kind of “finished” my product landing page but it looks very messy.
I think I got confused with all the positioning (when should I use position relative / position absolute / margins to position an element?)

Should I use flex to position content inside divs? (like h2 on top, text in the middle and button at the bottom?)

Should I use px or % to set a width? Or even vw/vh or em? Should I also use it for heights?

The worst part was the responsiveness. My logo resizes in a weird way and everything was positioned absolute or with margins looks terrible once your resize the window.

I don’t know which lesson I should focus on so I can practice because it looks really bad. And I may practice positioning and margins or flex but I never know what are the best uses of these rules.

I also feel that I have tons of styles overriding themselves and I lost track of what does what.

Here’s my codepen for anyone who’s got time to kill : https://codepen.io/CodeCaptina/pen/vMWLwZ

Please can you suggest advice to what I should work on?

looks a problem of positioning try to use display:flex; property if not using

Sorry I didn’t understand

Here is what i suggest.

Flexbox is a very good way to make flexible web pages. Use flexbox for anything related to putting elements in columns or rows.

The most common container in CSS is a div

Padding is used to make a space between the edge of a container (Parent) and the content of that container (Children). margin is used to create space around the edge of an element.9

Here is my example pen using flexbox --> https://codepen.io/Mike-was-here123/pen/pqRVpb

The blue box is the container for my card divs. Use inspect to make the screen smaller, you will see how everything moves around.

Your webpages should be built with flexibility in mind. Use percentage for containers with min-width to wrap them on smaller screens (with flexbox).

Build your webpage like a bunch of boxes that can be moved around as the screen gets smaller.

2 Likes

Hi @tsarinaspades, @michaelnicol gave good advice and I don’t have anything to add to it.
You didn’t say if you had any problems understanding flexbox but if so, I found the following to be a big help for me in understanding it. https://flexboxfroggy.com
And at the bottom of that page is very small font is a link to Grid Garden

2 Likes

@michaelnicol @Roma

Thanks for your advice!

I understand how flexbox works. I just don’t know when to use it exactly (for boxes I know but for simple text I’m not sure (like text inside a box)).
Also I never know how I should separate elements between eachother. It’s like I don’t know if I should use margins or position relative if I want my first element to sit further below another element.

As you can see my codepen, it’s pretty messy. The flexbox works perfectly, it’s more about spacing things or aligning them.

I think I understand what you mean now. Like for text inside a box how would you add a little padding between lines to make it easier to read…like using line-height: 1.5em;
Someone wrote a good explanation the other day regarding questions like yours. I’ll look for it and link it if I find it.

1 Like

Everything is a box in HTML.

  • Think of an HTML like a sideways skyscraper. This would be like the <body> or <main>
  • The floors would be containers/ ways to divide up the HTML into main sections. This could be a footer, navigation bar, etc.
  • Things inside of those floors can be sub-containers which represents rooms. This could also be another div or list element.
  • Everything I have mentioned so far is a block element. They are designed to contain other elements, like how a block <ul> contains a inline <li>.
  • Items inside of the rooms/ sub-containers can be inline elements like text, images, links, etc. This would be like the decoration in a room, on a floor, in a skyscraper.

Use flexbox to manipulate those floors/ containers on an HTML. You can flex them into rows, columns, or give it the ability to wrap or not.

If you look at my profile picture, it is next to this body of text that includes my name. I could use flexbox to put them into a row using a container that surrounds both.

Hopefully this made sense


Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

1 Like

Ok thanks for your advice. :slightly_smiling_face:

I think the best way to do it is to practice practice practice with different flexbox alignments.

As for inline elements, can I display them with flexbox or they have to be block elements?

:grey_question:Typically, for a nav bar menu should I use:

<html>
  <ul>
    <li>Link 1 </li>
    <li>Link 2 </li>
    <li>Link 3 </li>
  </ul>
</html>

CSS

ul {
display : inline-block;
}

or

ul {
display: flex;
}

or both?

Here is when to use inline:

Imagine you have to make a nested-grid; say, each box has to be 25% of the device’s width, and then INSIDE that box, there are to be 4 elements. You can make each of the boxes inline-flex and then each of the elements inside the boxes will have flex-item properties.

image

Source: Inline vs Block

Basically, a inline-block is a flexbox inside of another flexbox grid.

Now lets replace your <ul> with a div and put 4 boxes in it (like with the <li>'s). Each of those 4 boxes would then be using inline-block if you were to use flexbox again.

Since the Nav bar is the first layer, I suggest using display: flex.

1 Like