OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

I'm trying to teach myself to code,I wrote my first html and css code. It works fine on pc but on my phone it seems like the css is not working

  • Thread starter Thread starter Stefano carlo Sebis
  • Start date Start date
S

Stefano carlo Sebis

Guest
It works fine on pc but on my phone it seems like the css part is not working. the page is showing all white whith no background and the text is not formatted.I'm trying to understand what errors I made? or is it possible that the error is not on the css part of the code? thank you so much in advance for your answers.

I looked up here on stackoverflow too but I cant fix the problem. I already changed the width from px to % I really tried but I cant solve it by myself.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css"/>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bar Menu</title>
</head>
<body>
 <div class="Menu">
  <main>
    <h1>LA CASA DEL COCKTAIL</h1>
    <p>Cocktail Selection</p>
    <section>
      <h2>Vodka</h2>
      <article class="item">
      <p class="flavor">Cosmopolitan</p><p class="price">11.50</p>
      </article>
      <article class="item">
      <p class="flavor">Bloody Mary</p><p class="price">11.50</p>
      </article>
      <article class="item">
      <p class="flavor">Moscow Mule</p><p class="price">11.00</p>
      </article>
    </section>
    <section>
    <h2>Gin</h2>
    <article class="item">
    <p class="flavor">Negroni</p><p class="price">10.50</p>
    </article>
    <article class="item">
    <p class="flavor">French 75</p><p class="price">10.50</p>
    </article>
    <article class="item">
    <p class="flavor">Gimlet</p><p class="price">11.50</p>
    </article>
    </section>
  </main>
  <footer class="*****">
    <p><a href="">click here for info</a>
    </p>
  </footer>
</div>
</body>
</html>

Code:
h1 {
    text-align: center;
    font-family: shrikhand,impact;
  }
  p,h2 {
      text-align: center;
      font-family: impact;
    }
  body {
    background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg')
  }
 .Menu {
   background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg');
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 5%;
   max-width: 300px;
 }
  .flavor {
    font-family: cursive;
    text-align: left;
    width: 75%;
  }
  .price {
    font-family: cursive;
    text-align: right;
    width: 25%;
  }
  .item p {
    display: inline-block;
  }
<p>It works fine on pc but on my phone it seems like the css part is not working. the page is showing all white whith no background and the text is not formatted.I'm trying to understand what errors I made? or is it possible that the error is not on the css part of the code?
thank you so much in advance for your answers.</p>
<p>I looked up here on stackoverflow too but I cant fix the problem. I already changed the width from px to %
I really tried but I cant solve it by myself.</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bar Menu</title>
</head>
<body>
<div class="Menu">
<main>
<h1>LA CASA DEL COCKTAIL</h1>
<p>Cocktail Selection</p>
<section>
<h2>Vodka</h2>
<article class="item">
<p class="flavor">Cosmopolitan</p><p class="price">11.50</p>
</article>
<article class="item">
<p class="flavor">Bloody Mary</p><p class="price">11.50</p>
</article>
<article class="item">
<p class="flavor">Moscow Mule</p><p class="price">11.00</p>
</article>
</section>
<section>
<h2>Gin</h2>
<article class="item">
<p class="flavor">Negroni</p><p class="price">10.50</p>
</article>
<article class="item">
<p class="flavor">French 75</p><p class="price">10.50</p>
</article>
<article class="item">
<p class="flavor">Gimlet</p><p class="price">11.50</p>
</article>
</section>
</main>
<footer class="*****">
<p><a href="">click here for info</a>
</p>
</footer>
</div>
</body>
</html>
</code></pre>
<pre><code>h1 {
text-align: center;
font-family: shrikhand,impact;
}
p,h2 {
text-align: center;
font-family: impact;
}
body {
background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg')
}
.Menu {
background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg');
width: 100%;
margin-right: auto;
margin-left: auto;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
max-width: 300px;
}
.flavor {
font-family: cursive;
text-align: left;
width: 75%;
}
.price {
font-family: cursive;
text-align: right;
width: 25%;
}
.item p {
display: inline-block;
}
</code></pre>
Continue reading...
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top