Dropping middle flex item

HTML & CSS
21

Good!

I later come to think that the cause of the display error in Firefox was that you probably, like me, set the zoom to only affect text.

I usually check for that and that’s the reason I usually give the pseudo elements a content of not an empty "" or " " but an actual character; usually a dot but I prefer the hard space “\a0”.

Try give the before element a dot as content and also give it the min-height to fix the display in Firefox:

.wrapper:before {
  content: ".";
  float: right;
  width: 200px;
  min-height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #c77a7a;
}

Sorry I didn’t think of the cause of the error was the text only zoom when I suggested the zoom reset. :slight_smile:

3 Likes
22

Don’t worry, I should have done a Firefox refresh a long time ago … The problem was add-on: Dark Background and Light Text (based on personal experience I don’t recommend dark themes add-ons for websites - although it is more pleasing to the eyes)

Yes, setting to text only zoom is useful, but it can also be a problem when you forget it is active :laughing:

What about empty space   ? Can it be used?

23

Why not try on the pen? :slight_smile:

(“&nbsp” non breaking space aka the hard space entity, escaped “\a0”.)

Edit)
To be clear, the pseudo element’s content is not rendered as html. It should either be entered as a hard space character " " or be an escaped Unicode number “\a0”

2 Likes
24

Ahaaa…
For HTML we need to use  
and for CSS \a0

ABOUT HTML/CSS SPACE

1 Like
25

You a can always use the actual character if you have a key for it, or copy/paste from a char-table.

(My altGrey+space is set as a no-break-space.)

Edit)
I’m on Linux, but in Windows you can use Ctrl+keypad to enter the decimal unicode number, like Ctrl+0160 for a no-break space.

2 Likes
26

Note that if you used rem (or em) instead of pixels that issue wouldn’t have occurred :slight_smile:

  min-height: 3.75rem;
  line-height: 3.75rem;

Also it would be better to centre the items (horizontally and vertically) using flex and not use the line-height method which is a bit unwieldy in most cases. Removing the line-height would also have allowed the text to grow quite a bit without breaking the layout immediately.

2 Likes
27

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.