Kevin Powell - Community•6mo ago

Best way to "reorder" elements differently at different breakpoints

I have the following design I made for my portfolio hero and now that I'm going about coding it, I realize I made a bit of a problem for myself. In my desktop view, my CTA button arrives before my social links and the hand image is in its own layout section. In the mobile view, the social links seem like they would arrive first in the HTML and the CTA button after. I've decided I should switch over to trying to do my mobile side first today, as I had pretty much completed my hero focusing on the desktop view first. Here's the relevant HTML and SCSS, which works on desktop:

<section id="hero-section">
  <div class="container ...">
    <div class="center" ...>
      <div id="hero-main">
        <div role="heading" aria-level="1" aria-label="Welcome. I'm Angela, a full-stack web and mobile developer.">
        ...
        </div>
        <a ...><span class="button-label">reach out</span></a>
        <div class="icon-link-group" ... >
          <a class="icon-link" ...> ... </a>
          <a class="icon-link" ...> ... </a>
        </div>
      </div>
      <div id="hero-image">
        <img ...>
      </div>
    </div>
  </div>
  ...
</section>

<section id="hero-section">
  <div class="container ...">
    <div class="center" ...>
      <div id="hero-main">
        <div role="heading" aria-level="1" aria-label="Welcome. I'm Angela, a full-stack web and mobile developer.">
        ...
        </div>
        <a ...><span class="button-label">reach out</span></a>
        <div class="icon-link-group" ... >
          <a class="icon-link" ...> ... </a>
          <a class="icon-link" ...> ... </a>
        </div>
      </div>
      <div id="hero-image">
        <img ...>
      </div>
    </div>
  </div>
  ...
</section>

#hero-section {
  height: 100svh; //yes, I really did need viewport height here (I think, if you have another suggestion I'd love to hear it
  overflow-x: hidden; //I know, I know, wasn't sure what the best way to avoid scroll bars from appearing as I rotate the hand image which will happen in the future.

  & .container {
    height: 100%;
 
    @include mq(small) {
      & > .center {
        top: 55%;
        display: grid;
        grid-template-columns: 12fr 7fr;
        align-items: center;

        & #hero-main {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: $hero-main-gap;
        }
      }
    }
  }

  & #hero-image {
    & > img {
      transform: rotate(6deg);
    }
  }
}

#hero-section {
  height: 100svh; //yes, I really did need viewport height here (I think, if you have another suggestion I'd love to hear it
  overflow-x: hidden; //I know, I know, wasn't sure what the best way to avoid scroll bars from appearing as I rotate the hand image which will happen in the future.

  & .container {
    height: 100%;
 
    @include mq(small) {
      & > .center {
        top: 55%;
        display: grid;
        grid-template-columns: 12fr 7fr;
        align-items: center;

        & #hero-main {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: $hero-main-gap;
        }
      }
    }
  }

  & #hero-image {
    & > img {
      transform: rotate(6deg);
    }
  }
}

What's the best way to sort my HTML and SCSS to achieve this?

23 Replies

One Feather•6mo ago

I've considered the flexbox order property, but at least the desktop version really feels more like a grid layout to me. I may be wrong; what do you think?

MarkBoots•6mo ago

use grid-template-areas. for each breakpoint you can determine where every child is placed https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

MDN Web Docs

grid-template-areas - CSS: Cascading Style Sheets | MDN

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

One Feather•6mo ago

I'll try this out, thanks!

clevermissfox•6mo ago

grid also accepts the order property if that helps

One Feather•6mo ago

it does thank you!

One Feather•6mo ago

(please let me know if this should be a separate question) Here is what i have so far, but I'm stumped as to why my row height is not "respecting" the auto keyword for my first row. I've attatched a picture of the browser inspect with grid lines. I've tried min-content, max-content and fit-content as well. Here is the relevant scss:

#hero-content {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr, auto;
  grid-template-rows: auto, 1fr;
  grid-template-areas:
    "hh hs"
    "cta cta";
  place-items: center;

  & > [class^="button"] {
    grid-area: cta;
    z-index: 2;
  }

  & > .icon-link-group {
    grid-area: hs;
    flex-direction: column;
    justify-self: end;
  }
}

#hero-heading {
  grid-area: hh;
  justify-self: start;
}

#hero-image {
  grid-area: cta;
  justify-self: end;
  align-self: start;

  & img {
    max-height: 30svh;
  }
}

#hero-content {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr, auto;
  grid-template-rows: auto, 1fr;
  grid-template-areas:
    "hh hs"
    "cta cta";
  place-items: center;

  & > [class^="button"] {
    grid-area: cta;
    z-index: 2;
  }

  & > .icon-link-group {
    grid-area: hs;
    flex-direction: column;
    justify-self: end;
  }
}

#hero-heading {
  grid-area: hh;
  justify-self: start;
}

#hero-image {
  grid-area: cta;
  justify-self: end;
  align-self: start;

  & img {
    max-height: 30svh;
  }
}

Additionally, to center it in the page I have two divs wrapped around #hero-content :

.center-container {
  position: relative;

  & > .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &[data-type="vertically"] {
      left: auto;
      transform: translate(0, -50%);
    }
    &[data-type="horizontally"] {
      top: auto;
      transform: translate(-50%);
    }
  }
}

.center-container {
  position: relative;

  & > .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &[data-type="vertically"] {
      left: auto;
      transform: translate(0, -50%);
    }
    &[data-type="horizontally"] {
      top: auto;
      transform: translate(-50%);
    }
  }
}

One Feather•6mo ago

Never mind, just a simple syntax error I missed (commas in the grid template rows/columns)

clevermissfox•6mo ago

I like your aesthetic Would move the linked in and GitHub logos though

One Feather•6mo ago

Thank you! Where would you move them to?

clevermissfox•6mo ago

Not totally sure, maybe make them smaller, filled instead of stroked , in a row not a col and see how they look up in the nav or underneath “mobile developer”. Or maybe the lower right hand corner. They just look kind of awkward there with the bg element /decorations showing through. Kinda disrupts the balance between the chunk of “hi I’m Angela a full stack web and mobile dev” being on left and the hand and reach out button on the right.

One Feather•6mo ago

so something a bit more like the desktop version I suppose? I can see what you mean. The triangular background elements are just there for me to test, the current implementation is not how they're gonna end up I just cobbled something up in CSS to see visually for comparison. The final version would hopefully have animations, lowered opacity and saturation etc. to kind of distance it from the foreground elements. I think you're right about having it below the tagline though.

clevermissfox•6mo ago

Can you screenshot the desktop version ? They are just very large compared to the other elements where they are, at least on mobile.

One Feather•6mo ago

As for size, here's how it looks if its a bit smaller. I worry at this size it might be difficult to click?

clevermissfox•6mo ago

I give icons enough padding so they are visually the size I want but the tap area is still large enough. Hmm it still looks awkward to me in that spot. What happens to the menu on mobile ?

One Feather•6mo ago

It looks like so on mobile

One Feather•6mo ago

I just haven't actually implemented it yet

clevermissfox•6mo ago

I was just gonna suggest to maybe throw them into that menu for mobile but you’re way ahead of me!

One Feather•6mo ago

haha yeah i have my socials in a few places. I've watched some portfolio critiques and a common one is that people seem to like having the socials front and center, and easily accessible. I think I'll go ahead and just add them underneath the tagline and increase their padding like you said for a larger tap area.

clevermissfox•6mo ago

What monospace font is that you’re using? It’s nice

One Feather•6mo ago

Isn't it? It's called "Anonymous Pro" found here: https://fonts.google.com/specimen/Anonymous+Pro

Google Fonts

Anonymous Pro - Google Fonts

Anonymous Pro is a family of four fixed-width fonts designed especially with coding in mind. It is inspired by Anonymous 9, a freeware Macintosh bitmap font dev

clevermissfox•6mo ago

I usually use source code pro for monospace typefaces but this one has a little flair , I like it a lot. Thank you for sharing it!

One Feather•6mo ago

Of course haha thanks for your help! Yeah I really loved it as soon as I saw it, I wasn't originally planning on using a monospace at all 🙂

Gaming

Programming

Best way to "reorder" elements differently at different breakpoints