resize font-size of direct child which has class fs-5-CodePudding

I am using a media query where I indicate that based on the pixels I want all direct children (hence the p's) of the div to have a specific font-size. Among these there is a p which has class=fs-5.

I saw the responsive, the p that has that qulla class is not modified, it remains as it is.

How can I change it?

.foots {
  background-color: #0000e4;
  top: -40px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >

  <div >
    <p >Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

CodePudding user response：

You will have to specify !important to your font-size style. All Bootstrap classes use !important by default, which will take priority over any non-important specified classes, including media queries.

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p {
    font-size: 10px !important;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >
    <p >Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

Response to comment ~

You can select all p elements except the first child using the following CSS:

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
}

See it working here:

.foots {
  background-color: #0000e4;
  top: 0px;
  right: 100px;
  height: 300px;
}

@media screen and (max-width: 950px) {
  .foots>p:not(:first-child) {
    font-size: 10px !important;
    height: 40px;
  }
  .foots>p:nth-child(1) {
    font-size: 15px !important;
    height: 40px;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >
    <p >Other Lorem Stuff</p>
    <p> > Lorem ipsum dolor sit amet</p>
    <p> > Consectetur adipiscing elit</p>
    <p> > Aenean laoreet lectus nec risus malesuada auctor.</p>
    <p> > Vestibulum pellentesque</p>
  </div>

</div>

CodePudding user response：

You could delete the and instead specify it like this to make all p fonts the same size across the site.

p{
  font-size: --px;
}

Then, in the rest of your CSS if you need it to be larger or smaller than that for certain elements you can specify as a percentage of that initial font size. For example, you might want your copyright statement to be slightly smaller at the foot of each page (or your .foots text).

.foots{
  font-size: 80%;
}

To be honest, it looks like you are trying to use fs-5 to make the first paragraph slightly bigger than the rest. Like a lead-in to the page. So Bootstrap does this automtically if you use . Here are the docs... https://getbootstrap.com/docs/5.0/content/typography/#lead