Responsive Flexbox Question

HTML-CSS
1

Hi All,
I was working with flexbox trying to create a layout that would display a single column on a phone and a double column layout on a table or larger. Please give me some feedback on my solution. Thank you!

https://codepen.io/larrytooley/pen/rNBJjJo

2

You could center the articles in single-column mode. You could make them wider as well.

3

Hey! :slight_smile:

I had forked and had a play around with your code and found my way of doing the layout that (I think!) you wanted. Here is what I did:

https://codepen.io/Madalena-Design/pen/ExYQwdL

First, before I explain what I have done, I would recommend using relative units instead of px as the pixel is not relative unless you would want the element to be in that absolute position regardless of the screen size. The best unit would be rem and percentage for properties. Em is also responsive, but rem is much better.

Just a tad warning, I am in the sugar-craving mode so I may have colour your page Powerpuff Girls style :stuck_out_tongue: But, I have done this for demonstration purpose to help you to understand where is what. Also, I have only done changes in the elements with the <main> and the others have not been touch.

<main>
    <div class="flex-container">
      <article>
         <h2>Article 1</h2>
         <p>
         // and the rest of codes
    </div>
</main>

Okay, first inside the <main> element, I have added a <div> element, the purpose of this is to be a flex container for all the <article> elements within. It is best to do this because it will help to align both horizontally and vertically the elements more flexible.

    *,
    *::after,
    *::before {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }

In the CSS, it is always best to do a “CSS reset” as by default, every browser set their own values for padding and margin on a particular element. By doing this, you will set all the inherited elements to have the value of padding and margin to 0 by default, which can then override later. Google CSS reset for a better explanation.

    main {
      background-color: hotpink;
      width: 100%;
      padding: 4rem 3rem;
    }

    .flex-container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

As this is a mobile-first approach, first I have added paddings to the <main> so it cushioned the flex container away from both top and bottom, left and right. As the flex-container is 100% wide, this will make it centered horizontally due to its value being even. The purpose is different for the vertical side, this is because you have set the position of <header> and <footer> to fixed, this will remove the flow in the layout.

In the flex container, you will see flex-direction: column;

By doing this, it will set all the child elements in the flex container to be layout vertically.

As the flex container is 100% wide, the child elements will cover the whole width (of the container) by default, thus it is not needed to set the width property for the child elements.

article {
  background: orange;
  border-radius: 10px;
  padding: 2rem;
  margin-top: 2rem;
}

I added space between each articles using the margin-top property. There are flex property to do this, however, it is more complicated and after a quick research, it has been said that it is best to use the margin property. :woman_shrugging:

@media (min-width: 600px) {
  main {
    padding: 5rem;
  }

  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  article {
    width: 48%;
  }
}

Okay, in the media query I have changed to 600px for the sake of my screen, but again this should be in (this time) em because setting it to px means the users cannot change the font or element sizes, which is not good for accessibility purpose.

Anyway, now this is designed for tablet or desktop, to make two elements side by side is to change the value of the property of flex-direction to row, which will make the elements go in a column layout. Also, to avoid fitting all the articles in one line (and leading to scrolling) add the property flex-wrap and set the value to wrap. By doing this, this will push the elements to the next line once there is no space left.

Sorry, this is too long and I am also sorry if there was something that you already knew and I have explained the why and the dos/don’ts, I just hope I didn’t sound patronizing! :see_no_evil:

I also hope that I have helped out! :slight_smile:

1 Like
4

This is amazing!:heart:

I cannot believe you took so much time to put together this response. I am so grateful and I have learned so much.

I will definitely look into CSS reset and do some more study of relative units. I changed the media query to 60rem and it is performing well.

PS: I like the pink. It reminds me of my first guitar which I bought in the 80’s. :rofl:

1 Like
5

Honestly, I am happy to help out! I just happened to see your post and saw your code and before anyone knows, I was getting nitty-gritty into it, so it was good fun actually :smile:

I actually learned all this through this course on Udemy and I just found out there is a sale on. This is a FANTASTIC course and even though it is long, you will finish the course with so much knowledge in almost everything about CSS and responsive design, so yeah it is very valuable and recommended :slight_smile:

Aww, that sounds really cool! You must have definitely stood out in the crowd with a hot pink guitar :wink:
Plus, it definitely beats my bobbing bright pink hair many years ago (nope I am not joking!) :joy: