Refactoring Media Queries for BEM Blocks: Contacts and Map

[naumch1k]

Issue Description

Background:

The CSS media queries for the contacts and map BEM blocks utilize the max-width property, but there is a need to adjust the logic for proper handling of breakpoints. The transition currently occurs twice 😬 for each breakpoint (see video). When transitioning from 661px to 660px, the Contacts and Map sections switch from desktop to tablet view, and from 660px to 559px, the remaining sections shift from tablet to mobile view.

https://github.com/p-foundation/pink-app/assets/76534205/ce66060d-feb2-4e99-aaae-cd091bc023ad

Proposed Changes:

• The design for 1200px should be applied from 1200px and above, considering desktops and larger screens. Currently, our media rule states a maximum of 1200px, leaving it unclear beyond that point. Even though our current page width is limited to 1200px, we plan to lift this restriction later and adapt the site for larger screens.

• The design for 660px should be applied from 660px to 1199px — typically tablet orientations (tablet-landscape and tablet-portrait).

• The design for 320px should be applied from 320px to 559px, catering to various mobile devices. Currently, we've only styled for exactly 320px, and at 321px, the tablet layout kicks in.

To proceed with max-width, the logic needs to change as follows:

.element {
  /* styles for 1200px and above */
}

@media screen and (max-width: 1199px) {
  .element {
    /* styles for screens from 660px to 1199px (excluding 1200px) */
  }
}

@media screen and (max-width: 659px) {
  .element {
    /* styles for screens from 320px to 660px (excluding 600px) */
  }
}

Quick Instruction for Working on the Issue

‼️ Before checking out to a new branch, ensure you have the latest updates from the main by running git pull command.

• Please create a new branch, and name it fix-responsive-flicker
• Make Changes: address the issue within the branch
• Test thoughtfully: ensure that the updated styles provide a responsive design that aligns with the specified breakpoints.
• Open a pull request: reference the specific issue in your PR description using the following format: This pull request resolves [#issue_number](link_to_the_issue). Replace issue_number with the actual issue number and link_to_the_issue with the link to the respective issue. For example:

This pull request resolves [#123](https://github.com/username/repository/issues/123)

[MarPostovik]

.take

[github-actions[bot]]

@MarPostovik 👋 Thanks for picking up this issue! 🙌 Feel free to reach out if you need any help or have questions!