3 col practice

HTML & CSS
1

Ok so decided to take the 3 col layout further and just do a practice on my own on CodePen.

image
image1820Ă—836 360 KB

Really pleased with it, except that middle column, as it looks so tightly squished up haha. I think cause of the text there.

2

How about a link to the pen?

1 Like
3

Course :slight_smile:

That should be better.

1 Like
4

Personal opinion, so take it for what you will

  • 80em is a pretty narrow max width. Consider widening it or use a percentage instead.
  • It seems odd to have sidebars which are wider than the main content. I’d set a minimum-width on the main-content (like 50%) and let the sidebars adjust their width accordingly
  • You have much larger padding on the main content than the side bars. Consistency would help the readability there…
  • I know you’re playing but be very careful with your color choices. Too close to the backround hurts readability
4 Likes
5

Hi @DaveMaxwell. Cool I’ll keep all that in mind. Thanks for the heads up on the text color. I’ll make em white :slight_smile: . Maybe I can make that 80em 100% or 80% max-width instead.

6

@DaveMaxwell I tried setting a min-width on the main-column, but it didn’t do anything. There must be a reason why Paul didn’t set one.

7

Ok I played with this

.main-column {
  font-family: Segoe UI, Freestyle Script; 
  flex: 2 0 50%;
  margin: 0 0.625em; 
  padding: 10rem 5%;
  background: rgba(0, 0, 0, 0.7);
8

Something’s not right. My images are not resizing on page resize :frowning:. I have max-width:max-content; set even.

9

Fixed it. Changed it to 100%, and then set it on the img instead. I don’t think the wrapper itself needs it.

10

Use the “Analyze HTML” and “Analyze CSS” options on CodePen. You have a couple of typos which you should fix before you go any further. Then keep using the analysers every few minutes to check you haven’t made any more mistakes. It’s much easier to find and fix these things when there is only one or two.

4 Likes
11

@TechnoBear thanks, I will do that. Also, I’m not happy with the nav. It isn’t responding correctly on page resize.

12

On line 789, in a media query for mobile, in .nav{} you have:
font-size: 4.5vw;
Get rid of it and the menu items don’t resize to the huge size when you hit that smaller screen width.

2 Likes
13

Thank you @wake689 . So at 4.5vw it will not resize you’re saying. Am I understanding that right?

14

No, I’m saying that the reason the text in the menus becomes very large such that it all overlaps the subsequent menu items is because your media query tells the text to resize to 4.5vw when the screen size shrinks below a certain width. Choose a different text size or omit the text size altogether, on that line. I tend to use the units rem or em for font sizes in this situation.

2 Likes
15

In fact, responsive menus usually employ flexbox so that on mobile they change from
flex-direction: rows;
to
flex-direction: columns;

2 Likes
16

4.5vw is setting your font size to 4.5% of the viewport width. That seems a very strange unit to choose for font-size. You’ve also mixed that with letter-spacing of 0.25em. If you used the same units for your desktop view, you would have this:

4-5vw
4-5vw1274Ă—450 452 KB

Think about what you are doing, and choose the correct - and consistent - units for the task.

I’m not sure I’ve ever found a need to use letter-spacing, but I would certainly not use it in a mobile menu where space is at a premium.

.nav ol {
  list-style: none;
  line-height:0px;
  padding: 1em;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  background: rgba(0, 0, 0, 0.3);
}

Why are you using ems, rems and px values all mixed together here? And what on earth is line-height: 0px supposed to achieve? Of course things will overlap if you do that.

1 Like
17

@TechnoBear @wake689 ok thanks. I will go through everything and make changes : remove line height, letter-spacing, and omit text size. It should be better after all these.

18

@TechnoBear I don’t see letter-spacing in the .nav ol you shared there?

19

It’s in the rules for .nav.

1 Like
20

Yes, just seen it. Ok so I did all those changes, and removed

letter-spacing: 0.25em;
line-height:0.5em;

From

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
.nav {
  text-transform: capitalize;
  font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
  font-weight: 900;
  text-align:center;
}

Lines up nicely now. Though it can still be improved, I think. Maybe I should add in flex-direction:columns to it?