# Trouble in creating responsive design

**URL:** <https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184>\
**Category:** General\
**Created:** [June 5, 2020, 8:30am UTC](https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184 "2020-06-05T08:30:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![heman6760](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/heman6760/32/138311_2.png) [@heman6760](https://forum.freecodecamp.org/u/heman6760)\
**Post date:** [June 5, 2020, 8:30am UTC](https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184/1 "2020-06-05T08:30:09Z")

</div>

So I m trying to create to web page with first page just a background image(with background-attachment) and some text over it . Now I’ve set the height to 97vh so it covers the whole page .It works fine on desktop but it doesn’t scale well in mobile. How should I make it more responsive?So the image covers whole page only in desktop .Do I have to use media query for multiple dimensions or is there a better way.thanks.

> **[abdzaLP](https://codepen.io/heman1999/pen/abdzaLP)**
>
> ...

---

<div class="post-metadata">

**Author:** ![coder20201](https://avatars.discourse-cdn.com/v4/letter/c/a698b9/32.png) [@coder20201](https://forum.freecodecamp.org/u/coder20201)\
**Post date:** [June 5, 2020, 9:24am UTC](https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184/2 "2020-06-05T09:24:55Z")

</div>

Can you share your pen?

---

<div class="post-metadata">

**Author:** ![heman6760](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/heman6760/32/138311_2.png) [@heman6760](https://forum.freecodecamp.org/u/heman6760)\
**Post date:** [June 5, 2020, 9:46am UTC](https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184/3 "2020-06-05T09:46:01Z")

</div>

[https://codepen.io/heman1999/pen/abdzaLP](https://codepen.io/heman1999/pen/abdzaLP)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:51pm UTC](https://forum.freecodecamp.org/t/trouble-in-creating-responsive-design/399184/4 "2021-06-01T18:51:23Z")

</div>


