Change:
Challenge: I have seen issues with this challenge on the forum a number of times. The is using the computed properties but because you can set a minimum font size in the browser this may not work. In Chrome, you can use and set the minimum font size to be greater than 10px. If you then run the test it will fail. Changing the test to use a regex instead might be better. I'm not sure if this proposed change will fix all problem cases but it will at least take care of any minimum font size set in the browser. It should likely also fix any browser compatibility issues. I say that because this is one of the challenges where switching browsers often seem to help people pass the test.
Can I look at this issue? I was able to replicate the issue in my Chrome too.
I also want to point out that the following code passes even if it's incorrect because the way we test right now. <img width="565" alt="Screen Shot 2019-04-08 at 2 36 36 PM" src="https://user-"
I think one possible solution (avoiding regex) is just have the original style section as: and then have the camper change the font-size to 20px or 25px with the media query. The main reason people change this setting to something greater than 10px, is because the resolution on many screens is higher than it used to be, so 10px seems "small".
That is true. This will involve changing the tests.
That makes sense. Chaing the size will surely fix the original issue. Also, yes we do have to change the test for fixing the issue I pointed out above. Can I work fixing both of these issues? Also, do you want me to make a different new issue for the problem I pointed out or is it okay to have PR under this issue?
Actually, the more I think about this, we can not just look at the computed value regardless of the font-size we are looking for, because we don't have a way of mocking the user's screen height. We really need something like puppeteer to simulate the screen height at below and above 800px to validate the correct size is used. I guess we are stuck with using regex for both tests. I suggest we also add a new test which validates the normal font-size for p elements is 20px, so the user does not change the seed code. Then, I suggest we rearrange the tests, so the current second test becomes the first. There is no need to modify the test below because we just want to make sure they are using a media query of any kind and this test does validate that. The second test (currently the first test) is where we will need to make sure the media query is used and that the font-size will be 10px when the height is less than or equal to 800px. This means the new second test's regex will be very similar to the first test's regex, but it will validate the exists inside the media query definition. Go ahead and take a shot at the tests using what I have described above. Also, go ahead and remove the assert message arguments from the s, as they are no longer needed. $('style').text().replace(/s/g ,''): In an effort to simplify both tests regex, I suggest targeting the element's text and removing all white space by using:
Thank you so much for providing me detail information on things that I should get started with. It is good that we no longer need message argument from the testString as it was just repetitive. I will get started with this.
Here is the order of the test: media query is declared right or not (currently the second test) font-size is set to 10px or not for screen size lower than 800px using media queries. (using regex). the normal font-size for p elements is 20px. For number 3, I can only think of a regex solution. Because we cannot test the normal font-size using the following (screen is usually below 800px). However, if we use regex to check if then the 3rd test will pass and second will fail if a person has the following code. Please let me know if this will be a problem. Should I just proceed with regex for the 3rd test as well?
To check number 3 above, you should strip out any media query (using regex with a replace) and then validate that you find:
That sounds like a valid test. I will work on it and push a PR.

Discussion:
```yml tests: <del> - text: Tu elemento <code>p</code> debe tener el <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px. testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");' </del> - text: Declara una consulta <code>@media</code> para dispositivos con una <code>height</code> menor o igual a 800px. <del> testString: 'assert(code.match(/@medias*?(s*?max-heights*?:s*?800pxs*?)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");' </del> <ins> testString: assert($("style").text().replace(/s/g ,'').match(/@media(max-height:800px)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");' - text: Tu elemento <code>p</code> debe tener el <code>font-size</code> de 10 px cuando la <code>height</code> del dispositivo sea menor o igual a 800 px. testString: 'assert($("style").text().replace(/s/g ,'').match(/@media(max-height:800px){p{font-size:10px;?}}/g), "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");' - text: Tu elemento <code>p</code> debe tener el inicial <code>font-size</code> de 20 px cuando la <code>height</code> del dispositivo sea maior a 800 px. testString: assert($("style").text().replace(/s/g ,'').replace(/@media.*}/g, '').match(/p{font-size:20px;?}/g), Your <code>p</code> element should have an initial <code>font-size</code> of 20px when the device <code>height</code> is more than 800px); </ins> ``` </section>