Responsive email bar

HTML-CSS
1

Is it possible to make the email bar move along with join our family and join so I don’t have to add @media for every 10px ? Thanks.

2

Can you share the code you already have?

3

The pin and mine is not exactly the same somehow https://gyazo.com/98c3f193e0ad689868604ac924878cc0

4 
margin-left: auto; 
margin-right: auto;

should do the trick …

5

Kinda work but not really is this the best i can get?

6

I thought it just little centering issue but … You are missing closing tags in several cases, css without curly braces or named selectors also on several occasions. If you corrected that(plural) then you can worry about centering. Here’s a little help concerning centering. And use a bootstrap if you can.

7

I searched everything can’t find any css without curyl braces or named selectors. Example this.

border:1px #ccc solid;
padding:10px;
display:flex;
text-decoration: none;
color: black;
}
Is extra info i don’t use it. Could you give one example if you can find it please :slight_smile:

8

First of all you have structured wrong your html. Instead of:

<header>
  <main>
    <footer></footer>
  </main>
</header>

as you have it now, it should be like:

<header>
 "content for header goes here"
</header>
<main>
  "main content goes here"
</main>
<footer>
  "content for footer here"
</footer>
9

Like this?

10

<header> its not the same as <head>

11

Oh ye is for data storage. Should i use <header> tags. Right now i store everything in divs?

12

Alone #container4 selector, @media screen and (max-width:1300px){ without closing braces , @media screen and (max-width:700px) { also without closing braces. And those are only syntactic errors. Other things not necessary “errors” per se are concerning about elements placement. To much jerry riggin’ and more structure is needed overall. That’s why i suggested using Bootstrap.

1 Like
13

Don’t know what bootstrap is but i’ll check it out. thanks.

14 
<html>
  <head>
    links to css, metadata, etc
  </head>
  <body>
    <header>navigation here</header>
    <main>main content</main>
    <footer>footer content</footer>
  </body>
</html>

something like that.

2 Likes
15

Ok thanks alot i always love how you explain things.

16

Checked a video for bootstrap seems like the best way to make responsive websites for mobile thanks alot for the information about bootstrap. Will take a deeper look into it today.

17

Bootstrap isn’t best, but is easiest to learn especially for a beginners. Also sonrir’s structure is correct. Mind three different sections: A header, main and footer. You will encounter something named a “container” in bootstrap. In short, container is div with class container from bootstrap. Use three different div-containers for each of above named sections. And look up for bootstrap navbar.

1 Like