# Now you need to make it responsive. Add a @media query with a max-width of 768px **URL:** \ **Category:** Curriculum Help\ **Tags:** html, css\ **Created:** [June 22, 2022, 5:20pm UTC](https://forum.freecodecamp.org/t/now-you-need-to-make-it-responsive-add-a-media-query-with-a-max-width-of-768px/520809 "2022-06-22T17:20:46Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![architectb93](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/architectb93/32/243766_2.png) [@architectb93](https://forum.freecodecamp.org/u/architectb93)\ **Post date:** [June 22, 2022, 5:20pm UTC](https://forum.freecodecamp.org/t/now-you-need-to-make-it-responsive-add-a-media-query-with-a-max-width-of-768px/520809/1 "2022-06-22T17:20:47Z")
**Tell us what’s happening:** Describe your issue in detail here. ``` **Your code so far** ``` ```html /* file: index.html */ Piano
``` ```css /* file: styles.css */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } #piano { background-color: #00471b; width: 992px; height: 290px; margin: 80px auto; padding: 90px 20px 0 20px; position: relative; border-radius: 10px; } .keys { background-color: #040404; width: 949px; height: 180px; padding-left: 2px; } .key { background-color: #ffffff; position: relative; width: 41px; height: 175px; margin: 2px; float: left; border-radius: 0 0 3px 3px; } .key.black--key::after { background-color: #1d1e22; content: ""; position: absolute; left: -18px; width: 32px; height: 100px; border-radius: 0 0 3px 3px; } .logo { width: 200px; position: absolute; top: 23px; } @media only screen and (max-width:768px) { } ``` ``` **Your browser information:** ``` User Agent is: `Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36` **Challenge:** Step 27 **Link to the challenge:** > **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-responsive-web-design-by-building-a-piano/step-27)** > > Learn to Code — For Free ---
**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\ **Post date:** [June 22, 2022, 10:12pm UTC](https://forum.freecodecamp.org/t/now-you-need-to-make-it-responsive-add-a-media-query-with-a-max-width-of-768px/520809/2 "2022-06-22T22:12:12Z")
Remove the [media type](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types) `only screen and` from the code, as that was not asked for that. ---
**Author:** ![architectb93](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/architectb93/32/243766_2.png) [@architectb93](https://forum.freecodecamp.org/u/architectb93)\ **Post date:** [June 24, 2022, 5:33pm UTC](https://forum.freecodecamp.org/t/now-you-need-to-make-it-responsive-add-a-media-query-with-a-max-width-of-768px/520809/3 "2022-06-24T17:33:34Z")
Ty for help. I figured it out earlier but not sure how to delete the post. ---
**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\ **Post date:** [December 24, 2022, 5:34am UTC](https://forum.freecodecamp.org/t/now-you-need-to-make-it-responsive-add-a-media-query-with-a-max-width-of-768px/520809/4 "2022-12-24T05:34:11Z")
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.