Rectangle 27 1

This is something I've come across recently. The baseline on the fonts I was using for some reason did not line up, so I aligned to the bottom and increased the line height instead of adding padding.

This is how I solved my issue, if you have a link to a code pen I can check if it will work for you, or if another solution would be better.

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

I've tried but that didn't change anything, I can't really put a codepen up as this font is protected

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 5

The issue here is not line height but vertical placement of glyphs, in particular the location of the text baseline. Thats something that the font designer has decided on; the designer draws glyphs and places them in the em square, the conceptual device that has height equal to (or defined to be) the font height. In particular, the designer decides how much space there is below the baseline on one hand and above the height of uppercase letters on the other. Typically these spaces are equal, or almost equal, but they need not be. If they are substantially different, the intended use of the font is probably special and does not include usage like the one shown in the image. This suggests that the font choice should be reconsidered, but lets assume its fixed.

There are several ways to deal with the problem. If there is too much space below the letters, reducing line-height makes it smaller, but it also affects the space above. Top padding helps in a sense, but it increases the total height occupied by the element. You can also play with vertical-align, but it affects the height of line boxes.

Probably the simplest approach is to use relative positioning, assuming that the problem deals with a one-liner text. Relative positioning just displaces content in a specified way, without affecting the layout otherwise. You would need a wrapper for this, i.e. an element that contains the text, so that you can displace just the text, not the background.

The following demo uses a Google font, Candal, which has a similar problem, but in a different direction: the baseline is too low. Modifications of this approach to meet the original problem should be obvious, but the exact amount of displacement needs to be determined empirically (or from information extracted from the font file using a font inspector). Naturally, the em unit should be used here, even if you set font size in pixels or points (so that the code does not need to be changed if the font size is changed some day).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even setting solid) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>

That's working, but I'm looking for a scalable way to change this accross all my element (button/input), I can't put span in every button, and that won't fix input align.

For buttons, the padding method probably works well enough. However, in general, if a font causes problems like this, a different font should be chosen.

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 6

Whenever @font-face inexplicably doesn't work for me in the supposedly compliant browsers, I drop this in my .htaccess file. Supposedly some browsers won't load fonts hosted on other domains, and this bit of code troubleshoots that, but sometimes it is the only remedy to force fonts to load that are hosted on same domain as well. Generally its more of an issue with Firefox than with Chrome, but I just now used this to force fonts in Chrome while Firefox was working fine. Go figure.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Another inexplicably weird thing I have had happen with the @font-face syntax was that it wouldn't load font files properly with caps in the name. This only was an issue once, and after repeatedly banging my head against the desk troubleshooting @font-face a bunch of different ways, as a last resort I changed all font files and font-family name to lowercase characters, and it worked fine (I think that was an issue in ever-finicky IE, and only one website I was doing, exact same syntax on another website worked fine with upper and lowercase characters).

css - @font-face not working on chrome - Stack Overflow

css google-chrome css3 font-face
Rectangle 27 2

In the end, I've end up manually fixing the font myself, using help from this answer:

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

There are several issues with the code:

  • You are using only .ttf format. For cross-browser coverage, you need a few font formats. Use e.g. FontSquirrel to generate them (and the relevant CSS code).
  • Referring to font resources on another server generally fails, unless the server has been set to allow that. This is why jsfiddles fail here even when everything else is fixed.

A CSS identifier must not start with an (unencoded) digit. You can avoid this by using (consistently) a different class name, or alternatively by using an escape for the digit as defined in CSS specs:

With this fixed, it works on browsers that support .ttf fonts as downloadable fonts. This was tested using your live site with CSS locally edited in the browser.

css - @font-face not working css3 - Stack Overflow

css html5 font-face true-type-fonts
Rectangle 27 2

Maybe this could help: Font-Face Not loaded It could be to do with allowing the font types on the server in IIS. Also, I think Firefox has a bug where the font files need to be in the same folder as the CSS file. share|improve this answer edited May 23 at 11:44 Community♦ 11 answered Mar 11 '13 at 13:41 97ldave 4,14911934

Just noticed @Jrod comment on the question. My answer is irrelevant as you are getting a 500 Internal Server Error. You could maybe use my answer if you have problems after resolving the 500 Internal Server error. ;-)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - font-face not working in live - Stack Overflow

html css css3 font-face
Rectangle 27 1

In Chrome I've found that if you are using a font-face declaration. You can solve the line-height issue with either a style="" call i the HTML, or simply declaring the line-height AFTER the font declaration in your CSS.

I think Chrome just doesn't know how to calculate the line-height until it's rendered the custom font.

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

I have had that problem aswell in past, even different browsers gave different line heights! I think it happens when using the webfont generator and can only be fixed with using different line-height as far as I know.

Did you try fontsquirrel? There are some options with different results.

Fontsquirrel has a option to modify x-height, except font from fontshop are protected ..

css3 - Fix custom font line-height with CSS - Stack Overflow

css css3 fonts font-face webfonts
Rectangle 27 1

Your missing a semi-colon after the last src property. The code should read:

@font-face {
	font-family: 'Impact Label';
	src: url('ImpactLabel.eot');
	src: url('ImpactLabel.eot?#iefix') format('embedded-opentype'),
		url('ImpactLabel.ttf') format('truetype'),
		url('ImpactLabel.woff') format('woff');

	font-weight: normal;
	font-style: normal;
}

css - @font-face only works on IE, not on chrome - Stack Overflow

css css3 font-face
Rectangle 27 2

If you want to do this with a PHP script instead of having to run C code (or you're on a Mac like me and you can't be arsed compiling with Xcode only to wait a year for it to open), here's a PHP function that you can use to remove the embedding permissions from the font:

function convertRestrictedFont($filename) {
    $font = fopen($filename,'r+');
    if ($font === false) {
        throw new Exception('Could not open font file.');
    }

    fseek($font, 12, 0);

    while (!feof($font)) {
        $type = '';
        for ($i = 0; $i < 4; $i++) {
            $type .= fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not read the table definitions of the font.');
            }
        }
        if ($type == 'OS/2') {
            // Save the location of the table definition
            // containing the checksum and pointer to the data
            $os2TableDefinition = ftell($font);
            $checksum = 0;

            for ($i = 0; $i < 4; $i++) {
                fgetc($font);
                if (feof($font)) {
                    fclose($font);
                    throw new Exception('Could not read the OS/2 table header of the font.');
                }
            }

            // Get the pointer to the OS/2 table data
            $os2TablePointer = ord(fgetc($font)) << 24;
            $os2TablePointer |= ord(fgetc($font)) << 16;
            $os2TablePointer |= ord(fgetc($font)) << 8;
            $os2TablePointer |= ord(fgetc($font));

            $length = ord(fgetc($font)) << 24;
            $length |= ord(fgetc($font)) << 16;
            $length |= ord(fgetc($font)) << 8;
            $length |= ord(fgetc($font));

            if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
                fclose($font);
                throw new Exception('Could not read the embeddable type of the font.');
            }

            // Read the fsType before overriding it
            $fsType = ord(fgetc($font)) << 8;
            $fsType |= ord(fgetc($font));

            error_log('Installable Embedding: ' . ($fsType == 0));
            error_log('Reserved: ' . ($fsType & 1));
            error_log('Restricted License: ' . ($fsType & 2));
            error_log('Preview & Print: ' . ($fsType & 4));
            error_log('Editable Embedding: ' . ($fsType & 8));
            error_log('Reserved: ' . ($fsType & 16)); 
            error_log('Reserved: ' . ($fsType & 32));
            error_log('Reserved: ' . ($fsType & 64));
            error_log('Reserved: ' . ($fsType & 128));
            error_log('No subsetting: ' . ($fsType & 256));
            error_log('Bitmap embedding only: ' . ($fsType & 512));                         
            error_log('Reserved: ' . ($fsType & 1024));
            error_log('Reserved: ' . ($fsType & 2048));
            error_log('Reserved: ' . ($fsType & 4096));
            error_log('Reserved: ' . ($fsType & 8192));
            error_log('Reserved: ' . ($fsType & 16384));
            error_log('Reserved: ' . ($fsType & 32768));

            fseek($font, ftell($font) - 2);

            // Set the two bytes of fsType to 0
            fputs($font, chr(0), 1);
            fputs($font, chr(0), 1);

            // Go to the beginning of the OS/2 table data
            fseek($font, $os2TablePointer, 0);

            // Generate a new checksum based on the changed 
            for ($i = 0; $i < $length; $i++) {
                $checksum += ord(fgetc($font));
            }
            fseek($font, $os2TableDefinition, 0);
            fputs($font, chr($checksum >> 24), 1);
            fputs($font, chr(255 & ($checksum >> 16)), 1);
            fputs($font, chr(255 & ($checksum >> 8)), 1);
            fputs($font, chr(255 & $checksum), 1);

            fclose($font);

            return true;
        }
        for ($i = 0; $i < 12; $i++) {
            fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not skip a table definition of the font.');
            }
        }
    }

    fclose($font);

    return false;
}

Make sure to backup your font file before running this code and don't blame me if it corrupts.

Thanks a lot @Goose! I originally wrote this for my job, but the code got thrown away and replaced, so it lives on in Stack Overflow. Providing C code for a web application issue is definitely not ideal.

css - Make Adobe fonts work with CSS3 @font-face in IE9 - Stack Overfl...

css internet-explorer css3 internet-explorer-9 font-face
Rectangle 27 2

Your styles have in them when they should be '. Change them and it should work.

@font-face {
    font-family: Yekan;
    src:  url('font/BYekan.eot?#') format('eot'),    
          url('font/BYekan.woff') format('woff'),
          url('font/BYekan.ttf') format('truetype'); 
}

thanks this has worked and so strange. I'm not a newbie to CSS3 but I'm so busy that have missed such dump point

html - Why this CSS font face code does not load the font - Stack Over...

html css html5 css3 font-face
Rectangle 27 1

You have not written url and format in quotes.

src:url('font/BYekan.eot'); statement will use font file installed on user's computer if available and not load font file. This is important, otherwise every time font file will be loaded to user's browser even if it is available.

@font-face{
    font-family:'Yekan';
    src:url('font/BYekan.eot');
    src:local('Yekan'),url('font/BYekan.eot?#iefix') format('embedded-opentype'),url('font/BYekan.woff') format('woff'),url('font/BYekan.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

Can you also explain what changes you have made for the OP to know before he makes the copy/paste?

html - Why this CSS font face code does not load the font - Stack Over...

html css html5 css3 font-face
Rectangle 27 1

Use in your style.css :

@font-face {
    font-family:'Yekan';
    src:  url('font/BYekan.eot?#') format('eot'),    
          url('font/BYekan.woff') format('woff'),
          url('font/BYekan.ttf') format('truetype'); 
}

Then use in your class :

font-family: 'Yekan', sans, helvetica;

html - Why this CSS font face code does not load the font - Stack Over...

html css html5 css3 font-face
Rectangle 27 1

Your truetype font path wrapper should be replaced with '(single quot) not with `

@font-face {
    font-family: 'Yekan';
    src:    url('font/BYekan.eot?#') format(eot),    
          url('font/BYekan.woff') format('woff'),
          url('font/BYekan.ttf') format(truetype); 
}

Yes, the problem might be in '***', but you wrote: "it worked until quite several days ago". Did you change something after these days?


                                                                                                                                            

html - Why this CSS font face code does not load the font - Stack Over...

html css html5 css3 font-face
Rectangle 27 1

Different code for different browser in CSS

input[type=number] { 
      -moz-appearance: textfield;
      appearance: textfield;
      margin: 0; 
    }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}

css - change the appearance of input type number - Stack Overflow

css html5 css3
Rectangle 27 1

Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).

I have no idea why Chrome Dev Tools Web Inspector's "Computed Style" shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it's showing the wrong value because by changing the font to Arial I could easily tell that it's 14px.

Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.

css - Effect of !important declaration when sizing (fonts) with rem - ...

css css3 font-size
Rectangle 27 1

the equal line-height and text-align: center works very well to make icon in the middle both vertically and horizontally. However, if you want to make anything centered both vertically and horizontally in a dynamic way, code like this -

<div class="container>
   <div class="target">
   </div>
</div>
.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

html - How to center align font awesome icons vertically in a circle d...

html css css3
Rectangle 27 1

/* notch nav styles */
.notch-nav {
    overflow: hidden;
    background: #fff;
    margin: 0;
    list-style: none
}
.notch-nav li {
    float: right;
    margin-top: 33px;
    /* adjust this line to push entire notch nav down and away from minilinks */    
    margin-right: -15px;
}
.notch-nav a {
    display: block;
    /* padding:50px 0 20px 30px; */    
    margin-left: 30px;
    color: #cca134;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 25px;
}
.notch-nav a:hover {
    text-decoration: none;
    color: @295pms;
}

.notch-nav .current .dropdown:hover .dropbtn:before,
.notch-nav .current .dropdown:hover .dropbtn:after {
    display: none
}
.notch-nav .current .dropdown-content a:before,
.notch-nav .current .dropdown-content a:after {
    display: none
}
.notch-nav .current a {
    position: relative;
    text-decoration: none;
    z-index: 5;
}
.notch-nav .current a:before,
.notch-nav .current a:after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
}
/* make fullwidth-header 100% */
.fullwidth-header {
    display: none;
    width: 100%;
    height: 230px;
}
.fullwidth-header-block {
    display: block;
    background: @white;
    padding: 30px;
    margin-top: 53px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fullwidth-header-block p {
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/*  current classes  */
.curr1 li:nth-child(1),
.curr1 ~ div:nth-of-type(1) {
  background:blue;
  display: block;
}

.curr2 li:nth-child(2),
.curr2 ~ div:nth-of-type(2) {
  background:black;
  display: block;
}

.curr3 li:nth-child(3),
.curr3 ~ div:nth-of-type(3) {
  background:pink;
  display: block;
}

.curr4 li:nth-child(4),
.curr4 ~ div:nth-of-type(4) {
  background:green;
  display: block;
}
<ul class="nav notch-nav curr4">
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/about-rpu">About</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=contractors">Contractors</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=businesses">Businesses</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=residents">Residents</a>
    </div>
  </li>
</ul>


<div class="fullwidth-header">
  About
</div>

<div class="fullwidth-header">
  Contractors
</div>

<div class="fullwidth-header">
  Businesses
</div>

<div class="fullwidth-header">
  Residents
</div>

The "notch" is not present in your code, and i am unable to wrap them. See this codepen to get a better idea of what I'm trying to achieve: codepen.io/Goatsy/pen/rLVrJo (small block and bg-color should match)

@Goatsy Updated my answer with one way to go ... also check out answers given in this question of mine, for optional ways to trigger groups of elements: stackoverflow.com/questions/36162805/

Sorry - I have not yet had a chance to implement this. Let me get back to you in a few days.

css - Is it possible to apply same style to element 1 and element 2, w...

css css3
Rectangle 27 1

/* notch nav styles */
.notch-nav {
    overflow: hidden;
    background: #fff;
    margin: 0;
    list-style: none
}
.notch-nav li {
    float: right;
    margin-top: 33px;
    /* adjust this line to push entire notch nav down and away from minilinks */    
    margin-right: -15px;
}
.notch-nav a {
    display: block;
    /* padding:50px 0 20px 30px; */    
    margin-left: 30px;
    color: #cca134;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 25px;
}
.notch-nav a:hover {
    text-decoration: none;
    color: @295pms;
}

.notch-nav .current .dropdown:hover .dropbtn:before,
.notch-nav .current .dropdown:hover .dropbtn:after {
    display: none
}
.notch-nav .current .dropdown-content a:before,
.notch-nav .current .dropdown-content a:after {
    display: none
}
.notch-nav .current a {
    position: relative;
    text-decoration: none;
    z-index: 5;
}
.notch-nav .current a:before,
.notch-nav .current a:after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
}
/* make fullwidth-header 100% */
.fullwidth-header {
    display: none;
    width: 100%;
    height: 230px;
}
.fullwidth-header-block {
    display: block;
    background: @white;
    padding: 30px;
    margin-top: 53px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.fullwidth-header-block p {
    margin-top: 0;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

/*  current classes  */
.curr1 li:nth-child(1),
.curr1 ~ div:nth-of-type(1) {
  background:blue;
  display: block;
}

.curr2 li:nth-child(2),
.curr2 ~ div:nth-of-type(2) {
  background:black;
  display: block;
}

.curr3 li:nth-child(3),
.curr3 ~ div:nth-of-type(3) {
  background:pink;
  display: block;
}

.curr4 li:nth-child(4),
.curr4 ~ div:nth-of-type(4) {
  background:green;
  display: block;
}
<ul class="nav notch-nav curr4">
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/about-rpu">About</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=contractors">Contractors</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=businesses">Businesses</a>
    </div>
  </li>
  <li>
    <div class="dropdown">
      <a class="dropbtn" href="/utilities/?q=residents">Residents</a>
    </div>
  </li>
</ul>


<div class="fullwidth-header">
  About
</div>

<div class="fullwidth-header">
  Contractors
</div>

<div class="fullwidth-header">
  Businesses
</div>

<div class="fullwidth-header">
  Residents
</div>

The "notch" is not present in your code, and i am unable to wrap them. See this codepen to get a better idea of what I'm trying to achieve: codepen.io/Goatsy/pen/rLVrJo (small block and bg-color should match)

@Goatsy Updated my answer with one way to go ... also check out answers given in this question of mine, for optional ways to trigger groups of elements: stackoverflow.com/questions/36162805/

Sorry - I have not yet had a chance to implement this. Let me get back to you in a few days.

css - Is it possible to apply same style to element 1 and element 2, w...

css css3
Rectangle 27 0

ul#flexmenu,
ul#flexmenu > li,
ul#flexmenu li > ul,
ul#flexmenu li > ul > li,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-webkit-display: flex; display: flex;
}

ul#flexmenu,
ul#flexmenu li  >  ul.row {
-ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;
}

ul#flexmenu > li,
ul#flexmenu li > ul.col,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row;
}

ul#flexmenu,
ul#flexmenu li > ul {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

ul#flexmenu,
ul#flexmenu > li,
ul#flexmenu li > ul > li,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-webkit-align-items: center; align-items: center;
}

ul#flexmenu,
ul#flexmenu li > div {
-webkit-perspective: 1000; perspective: 1000; 
-webkit-transform: translateZ(0); transform: translateZ(0); 
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}

ul#flexmenu,
ul#flexmenu li > ul {
content: 'viewport-units-buggyfill; width: 100vw; ';
}


li select,
ul#flexmenu > li,
ul#flexmenu li > div,
ul#flexmenu li > ul {
height: 20vh;
}


ul#flexmenu {
margin: 0; 
padding: 0; 
height: 100%; 
-webkit-overflow-scrolling: touch;
}

ul#flexmenu > li {
justify-content: flex-start; 
flex-grow: 0; 
flex-shrink: 0; 
width: 100vw; 
content: 'viewport-units-buggyfill; width: 100vw; height: 20vh; '; 
position: relative; 
z-index: 2;
}

ul#flexmenu > li.disabled {
background: black;
}

ul#flexmenu li > a,
ul#flexmenu li > span,
ul#flexmenu li > div > a,
ul#flexmenu li > div > span,
ul#flexmenu li > input[type='text'],
ul#flexmenu li > input[type='number'] {
padding: 0 1.1em; 
text-transform: uppercase; 
color: white; 
text-decoration: none; 
font-size: 5.5vh; 
line-height: 5.5vh; 
content: 'viewport-units-buggyfill; line-height: 5.5vh; font-size: 5.5vh; ';
}

ul#flexmenu li > div {
width: 100vw; 
line-height: 20vh; 
background: inherit; 
z-index: 2; /*fixforcontextmenusoitcomesontop*/
}


li select {
top: 0; 
opacity: 0; 
position: absolute; 
content: 'viewport-units-buggyfill; height: 20vh; ';
}

li.three > select {
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; ';
}

ul#flexmenu li > ul {
background: inherit; 
width: 100vw;
}

ul#flexmenu li > ul.col > li.two.offset {
width: 35vw; 
content: 'viewport-units-buggyfill; width: 35vw; ';
}

ul#flexmenu li > ul.col > li.two.offset+li {
width: 65vw; 
content: 'viewport-units-buggyfill; width: 65vw; ';
}
}

ul#flexmenu li > ul > li {
flex-grow: 0; 
flex-shrink: 0; 
justify-content: center; 
-webkit-justify-content: center; 
position: relative; /*fixforabsolutepositionnedelements(dropdownsinsideflexmenulis)*/
}

ul#flexmenu li > ul.row > li,
ul#flexmenu li > ul.row > li > ul.col {
height: 10vh !important; 
content: 'viewport-units-buggyfill; height: 10vh !important; ';
}

ul#flexmenu li > ul.row > li span,
ul#flexmenu li > ul.row > li a,
ul#flexmenu li > ul.row > li input {
padding: 0 1.4em; 
font-size: 6vw; 
line-height: 6vw; 
content: 'viewport-units-buggyfill; line-height: 6vw; font-size: 6vw; ';
}

li.justify-left {
justify-content: flex-start !important; 
-webkit-justify-content: flex-start !important;
}

ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
border: 1px solid white;
}

ul#flexmenu li > ul > li.two {
width: 50vw; 
content: 'viewport-units-buggyfill; width: 50vw; ';
}

ul#flexmenu li > ul > li.three {
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; ';
}

ul#flexmenu li > ul > li.four {
width: 25vw; 
content: 'viewport-units-buggyfill; width: 25vw; ';
}

li.two > a,
li.two > span {
font-size: 6vw !important; 
line-height: 6vw !important; 
content: 'viewport-units-buggyfill; line-height: 6vw!important; font-size: 6vw!important; ';
}

li.three > a,
li.three > span {
font-size: 5vw !important; 
line-height: 5vw !important; 
content: 'viewport-units-buggyfill; line-height: 5vw!important; font-size: 5vw!important; ';
}

li.four > a,
li.four > span {
font-size: 4vw !important; 
line-height: 4vw !important; 
content: 'viewport-units-buggyfill; line-height: 4vw!important; font-size: 4vw!important; ';
}

li.two: last-child {
border-width: 0 !important;
}

li.two: first-child,
li.three: nth-child(1),
li.three: nth-child(2),
li.four: nth-child(1),
li.four: nth-child(2),
li.four: nth-child(3) {
border-width: 0 1px 0 0 !important;
}

li.three: nth-child(3),
li.four: nth-child(4) {
border-width: 0 0 0 0 !important;
}

css - Optimizing CSS3 Flexbox structure - Stack Overflow

css css3 flexbox