CODEWITHSUNDEEP
htmlcss
user2909180
user2909180

Reputation: 215

Problems with responsive design and coding

I have problems to get any response when coding Responsive design and I don't understand why. Is it my phone that is the problem or the code:

<style>
@media only screen and (max-width: 380px) {
  menu {
    width: 100%;
  }
}
<style>

<ul id="menu">
    <li><a><img src="./img/logo.jpg" alt="Start">car</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">bike</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">train</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">truck</a></li>
</ul>

This do not fit my display on the phone, vertically. Is it something worng with the code?

Upvotes: 0

Views: 59

Answers (2)

astroide
astroide

Reputation: 817

In your CSS you use menu, which selects elements whose tag name is menu. If you wanted to select your menu, you should use #menu instead, which will select the element with an id of menu, like this :

<style>
@media only screen and (max-width: 380px) {
  #menu {
    width: 100%;
  }
}
<style>

<ul id="menu">
    <li><a><img src="./img/logo.jpg" alt="Start">car</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">bike</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">train</a></li>
    <li><a><img src="./img/logo.jpg" alt="Start">truck</a></li>
</ul>

Upvotes: 2

Adil Mughal
Adil Mughal

Reputation: 9

Have you added the responsive meta tag in HTML markup or not? Here it is

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 1

Related Questions