Refactor: Using two types of media queries

[NazarPauk]

Describe the bug Two ways of writing media queries are used, which contradicts the rules for writing them specified in readme.md

To Reproduce Steps to reproduce the behavior:

1. Go to the blocks folder
2. Click on the style files of the blocks and their elements
3. You can see different usage of media queries.

Desktop:

• OS: iOS
• Browser: Microsoft Edge
• Version: 116.0.1938.54

Additional context Here is how the code for media queries in some files looks now:

@media(max-width:1199px){
...
}

@media(max-width:659px){
...
}

Correct media queries should look like this:

@media screen and (max-width: 1199px) {
...
}

@media screen and (max-width: 659px) {
...
}

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 refactor-media-queries
• Make Changes: Review all stylesheet files and check them for errors in media queries, then replace them with correct ones.
• Test thoughtfully: Test if the media queries you've changed continue to work on all screen sizes.
• 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)

[github-actions[bot]]

@NazarPauk 👋

Thanks for dropping in with the issue! Our team is ready to dive into it as soon as possible! 🚀

If you would like to work on this issue, please wait for us to decide if it's ready; hang tight until we've given it the green light. The issue will be ready to work on once we remove the label.

To claim an issue that does not have the label, please leave a comment that says ".take". If you have any questions, please follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

Let's make some magic together! ✨

[MarPostovik]

Hi @NazarPauk Good job on writing your fisrt issue! 👍 I have a few suggestions on how to improve it:

• Let's remove the information in brackets in this part:

  Desktop (please complete the following information)

• Let's also remove the square brackets here as I don't see and sense in them:

  • OS: [iOS]
  • Browser [Microsoft Edge]
  • Version [116.0.1938.54]

• What images do you mean here:

  Here is how the code for images looks now

• Let's add in the additional context the code for both ways of writing media queries and specify which one is right.
• Maybe you can suggest the real good example for the branch name, for example refactor-media-queries?

  Please create a new branch, and name it fix-suggest-name

• Let's highlight the part "screen and" here somehow:

  Specify the "screen and" part...

• In the file where you suggest what changes the person should make, don't provide the names of the exact blocks where the person should look for the problem. Instead suggest reviewing all CSS files, finding the ones where the media queries are not right and replacing them with the right media queries. This way other developers could dive deeper into the issue, understand it better, and develop further their skills

[NazarPauk]

Done, thank you for the suggestion!

[MarPostovik]

@NazarPauk thank you for your changes. But let's also point out in the instruction that the person will need to test if the updated media queries are still working. Hint: take a look at other issues in our project to find out where and how to write this part.

[naumch1k]

Hey @NazarPauk 👋 Let's also make a minor formatting adjustment to CSS code examples to make them more precise and consistent. Please replace 'html' with 'CSS' after the triple backticks (```) to indicate that code blocks contain CSS styling. This adjustment will bring some familiar CSS styling to your code snippets, making them easier to read and work with

[NazarPauk]

@naumch1k hey! indicated, thank you for the suggestion

[wwily]

.take

[github-actions[bot]]

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