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.
<!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>
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;
}
New contributor
Stefano carlo Sebis is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.