Jump to content

Setting Font Size in Flexbox Child Container to a Different Value

ahr aitch

Recommended Posts

In the screen I am trying to design, I want one of the flexbox child containers to have a different font size than declared in the the class shown below.  In the screenshot where the name appears I want  font-size: 20px but putting that statement in the .name class descriptors has no effect.  Can I make just that area have the larger font size?  If so, how?

.flex-container > div
  background-color: #ffffff;
  justify-content: left;
  text-align: center;
  font-size: 9px;
  display: inline-flex;
  width: 500px;
  height: 30px;
  justify-content: center;
  font-size: 20px;
  margin-top: 5px;
  margin-bottom: 3px;
  border-style: line; 
  border-width: 1px; 
  border-radius: 5px;
  padding-left: 5px;
  padding-top: 5px;
  background-color: #fff;



Font size.PNG

Edited by ahr aitch
Link to comment
Share on other sites

It's a matter of specificity. Selectors that are more specific take priority and override rules of other selectors. This page describes which selectors are more specific: https://www.w3schools.com/css/css_specificity.asp

Assuming that your .name element is a child of .flex-container, then this selector should allow you to change the font size:

.flex-container .name


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...