media queries. What am I doing wrong?

Question

React

Started training in adaptive layout. I came across the following problem:
I am writing media queries of the form (@media (max-width: 610px), everything works fine on a laptop, overrides styles and all that
. and no... Although on a laptop when changing the browser window, everything is fine.What
am I doing wrong?
site colorkid.ru/coud/index1.html

Answer 1

saveLocalMoodsData(moodboard) {
  const {hoc_methods} = this.props;
  return new Promise((resolve, reject) => {
      this.showAuthPopup({
          callback: () => {
            hoc_methods.saveLocalMoods(moodboard.id).then(payload => {
              hoc_methods.closeModal();
              const mood = safeGet(payload, 'payload', {});
              const data = {...mood, count: mood.blocks.length};
              // reject при ошибке, если она возможна
              resolve(data);
            })
          }
      })
  });
}

addCardToMoodboard(moodboard, cardData) {
  if (moodboard.localMode) {
    return saveLocalMoodsData(moodboard)
      .then(data => this.addCardToMood(data, cardData));
  } else {
     return this.addCardToMood(moodboard, cardData);
  }
}

Answer 2

The easiest way is to use async/await here.

Answer 3

I would venture to suggest that the matter is in the meta viewport, googled about it.
Try adding the following to the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 4

Already answered. But I can advise you to use bootstrap.