Local @media for a library component

Bootstrap Studio Help
1

Hi,

Is there a way to create an inline @media that only applies to a user created component.
I have a Row with several columns and I want the H6 font size to depend on the screen size.

I only want he H6 font size to change within the component - like a local variable in a function.

Hope you can help or have a good laugh at the idea.

Raj

2

Look into container queries. BSS supports container queries as well as media queries.

3

give your user created component an ID or class to suit.

Then style your h6 as follows:

#my-custom-component h6 {
  font-size: 1rem;
}

@media (min-width: 768px) {
  #my-custom-component h6 {
    font-size: 1.2rem;
  }
}

@media (min-width: 992px) {
  #my-custom-component h6 {
    font-size: 1.4rem;
  }
}

If the component will only appear once then an ID will be fine, but if multiple instances on a page then best to change to a class

4

Thank you very much for your help.