Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - How to position items responsively using css that can't be arranged easily in css grid?

0 votes
156 views
in Technique[技术] by (71.8m points)

html - How to position items responsively using css that can't be arranged easily in css grid?

new to development here and have designed a personal portfolio site that has give me a headache (with placeholder images). Home Page of Portfolio

The nav is fixed to the top, and it's a long-page layout, with each of the sections mentioned in the nav stacked below. I've tried using css grid, I've tried using positioning & media queries, and I'm at a loss as to where I'm stumbling. The image is large and not resizing the way I expected.

Here's the HTML & some CSS:

/* Recurring Styles */
html, body {
  background-color: #DEDEDE;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Arabic Font 2013';
  font-weight: normal;
  color: #262525;
  text-transform: lowercase;
}

p {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 100;
}

/* Navigation */
header {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  z-index: 1;
}

nav ul {
  display: flex;
  float: right;
}

nav li {
  list-style-type: none;
  text-transform: uppercase;
  letter-spacing: .20rem;
  padding-left: 7rem;
}

nav a {
  text-decoration: none;
  color: #404040;
  font-weight: bold;
  font-size: .65rem;
}

/* HOME */
#home-section {
  height: 100vh;
}

.intro {
  display: inline-block;
  margin: auto 20%;
}

.intro h1 {
  font-size: 8rem;
  letter-spacing: -.5rem;
  margin: 0;
}

.img-container {
  display: inline-block;
}

.img-container img {
  max-height: 50px; 
  width: auto;
}

.aside p {
  float: right;
  text-transform: uppercase;
  border-bottom: 2px solid #262525;
  transform: rotate(90deg) translateY(-200%) translateX(-100%);
  transform-origin: 0px 0px;
  font-weight: 500;
}
<!doctype html>

    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

      </head>

      <body>
        <main>
          <section id="home-section">
            <header>
              <nav>
                <ul>
                  <li><a href=#home-section>Home</a></li>
                  <li><a href=#about-section>About</a></li>
                  <li><a href=#work-section>Work</a></li>
                  <li><a href=#contact-section>Contact</a></li>
                </ul>
              </nav>
            </header>
            <div class="vl" id="vl-home"></div>
            <p class="page-num" id="num-home">01</p>
            <article class="intro">
              <h1>Hey, there.</h1>
              <p>Nice to meet you &mdash;
              <br>I'm Marci, and I’m taking life one &#60; element &#62; at a time. </p>
            </article>
            <div class="aside">
              <p>Front - End<br>Web Developer</p>
            </div>
            <div class="accent-overlay overlay-home"></div>
            <div class="img-container">
              <img src="./src/headshot-main.png" id="darkest">
              <img src="./src/headshot-main.png" id="lighter">
              <img src="./src/headshot-main.png" id="lightest">
            </div>
          </section>
        </main>
      </body>
    </html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This layout I've made seems to work, you would just have to add some Media Queries.

A few suggestions

  • I would add a background to the navbar and the sidebars in the case they ever overlap with other elements
  • The images could load so I had no way to test their positioning. Be sure that they have align-self set to flex-end so they stick to the bottom of the container (if you use this layout).
  • Try recreating your code to emulate a specific problem next time so it's easier for people that are having the same problem to find it.

You can see my changes down below, I hope I could help :)

/* Defaults */

html,
body {
  background-color: #DEDEDE;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow-y: hidden;
}

body {
  display: flex;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Arabic Font 2013';
  font-weight: normal;
  color: #262525;
  text-transform: lowercase;
}

p {
  font-weight: 100;
}


/* Navigation */

header {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  z-index: 1;
}

nav ul {
  display: flex;
  float: right;
}

nav li {
  list-style-type: none;
  text-transform: uppercase;
  letter-spacing: .20rem;
  padding-left: 7rem;
}

nav a {
  text-decoration: none;
  color: #404040;
  font-weight: bold;
  font-size: .65rem;
}


/* HOME */

#home-section {
  position: relative;
  top: 10%;
  height: 100vh;
}

.intro h1 {
  font-size: 8rem;
  letter-spacing: -.5rem;
  margin: 0;
}

.img-container img {
  max-height: 50px;
  width: auto;
}


/* Sidebars */

aside {
  border: 1px solid black;
}

#page-number-aside {
  width: 10%;
  height: 100vh;
}

#web-dev-aside {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
}


/* Decoration */

#yellow-box {
  background: yellow;
  z-index: 1;
  height: 40%;
  width: 60%;
  position: absolute;
  right: 0;
  top: 40%;
}

#home-section main {
  display: flex;
  justify-content: space-between;
}
<header>
  <nav>
    <ul>
      <li><a href=#home-section>Home</a></li>
      <li><a href=#about-section>About</a></li>
      <li><a href=#work-section>Work</a></li>
      <li><a href=#contact-section>Contact</a></li>
    </ul>
  </nav>
</header>
<aside id="page-number-aside">
  <div class="vl" id="vl-home"></div>
  <p class="page-num" id="num-home">01</p>
</aside>
<div style="overflow-y: scroll; width: 100%;">
  <section id="home-section">
    <main>
      <article class="intro">
        <h1>Hey, there.</h1>
        <p>Nice to meet you &mdash;
          <br>I'm Marci, and I’m taking life one &#60;element&#62; at a time.</p>
      </article>
      <div class="img-container">
        <img src="./src/headshot-main.png" id="darkest" alt="girl">
        <img src="./src/headshot-main.png" id="lighter" alt="girl-light">
        <img src="./src/headshot-main.png" id="lightest" alt="girl-lighter">
      </div>
    </main>
    <aside id="web-dev-aside">
      <p>Front - End<br>Web Developer</p>
    </aside>
    <div id="yellow-box"></div>
  </section>
</div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...