javascripthtmlcssresponsive-design

CSS - apply mobile pattern also on desktop when parent container is small

I have an HTML/CSS widget that can be integrated anywhere on a website. This widget is responsive and have the following rules for mobile:

@media screen and (max-width: 768px) {
  .bstfbt__price-cta--desktop {
    display: none;
  }

  .bstfbt__price-cta--mobile {
    align-self: center;
  }

  .bstfbt__price-cta--mobile > div {
    align-items: center;
  }
}

@media screen and (min-width: 768px) {
  .bstfbt__price-cta--mobile {
    display: none;
  }
}

I also want these rules to apply on desktop when the parent container where the widget is placed on is small.

How should I proceed?

Solution

  • Container queries are fairly new to CSS. I have not tried them myself, but it sounds like they might be what you need. Browser support is green across the board, but only for the last year or so, so if you do use these queries just be aware that they won't work with older browser versions. Have a look at this answer for examples and links to tutorials.