I have an issue with CSS display:none for mobile queries as exemplified in code below. When screen width is reduced to 600px the #media query rules remove a div that should be displayed.
div .mobile-content is being removed together with div .desktop-content under #media rules. The mobile screen becomes blank as both divs are removed instead of .desktop-content
I suspect its a simple issue...how do I fix this?
Here is the code...
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
.mobile-content {
display: none;
}
#media(max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>
You can use an extra media query if it is okay for you or just add display:block; to your .mobile-content{} inside #media (max-width:600px){} as suggested by the other answers.
It will solve the problem. The code will be:
#media all and (min-width:600px){
.mobile-content{
display:none;
}
}
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
#media all and (max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>
Add display: block; under the font-size: 28px; like this
#media(max-width:600px) {
.mobile-content {
background-color: green;
color: white;
font-size: 28px;
display: block;
}
.desktop-content {
display: none;
}
}
Well the issue isnt that both are being removed. It's that the mobile isnt being displayed in the first place. Your code should look something like this:
.desktop-content {
background-color: black;
color: white;
font-size: 28px;
}
.mobile-content {
display: none;
}
#media(max-width:600px) {
.mobile-content {
display: block;
background-color: green;
color: white;
font-size: 28px;
}
.desktop-content {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Desktop & Mobile</title>
</head>
<body>
<div class="container">
<div class="desktop-content">
<p>This is desktop content only</p>
</div>
<div class="mobile-content">
<p>This is mobile content only</p>
</div>
</div>
</body>
</html>
Related
i am using grid to make navigation menu
here is the screen shot of original template Before Responsive
After responsive
Now this is my code that i am trying to make mobile responsive
Here it is index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navigation">
<div class="navigation-logo">
<img src="assets/images/logo.svg" alt="logo" />
</div>
<div class="navigation-menu">
Home
News
Popular
Trending
Category
</div>
</nav>
</body>
</html>
And here is my style.css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navigation {
display: inline-grid;
grid-template-rows: 3rem;
grid-template-columns: 44rem;
margin: 2rem 2rem;
width: 5vw;
/* overflow-x: hidden; */
}
.navigation-logo {
max-width: 5vw;
}
.navigation-menu {
margin: -2rem 50rem;
width: 30vw;
/* overflow: hidden; */
}
.navigation-menu a {
text-decoration: none;
margin: 0 10px;
color: lightslategray;
}
.navigation-menu a:hover {
color: rgb(227, 102, 56);
}
#media only screen and (min-width: 20vw) and (max-width: 20vw) {
.navigation {
background-color: lightbulb;
}
}
Trying to make them responsive Need your help and guidance Thank you
I've searched a lot but apparently it doesn't work. Just as fact, I am new and I don't want to be in tutorial hell, so I made a practice to write what I've learned, but I'm stuck with this:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título del sitio web</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
Inicio
App
Sobre nosotros
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.links{
text-align: right;
padding-right: 20px;
color: black;
text-decoration: none;
display:inline-block;
}
.foot{
position: absolute;
bottom:0%;
width: 100%;
background: #404040;
color: white;
}
You can just move the links to a new div and style the div to align to right. And for the rest of the link decoration, you can add them in a separate class under their <a> tags.
* {
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.linksDiv {
text-align: right;
}
.links {
padding-right: 20px;
color: black;
text-decoration: none;
display: inline-block;
}
.foot {
position: absolute;
bottom: 0%;
width: 100%;
background: #404040;
color: white;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título del sitio web</title>
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
</div>
<div class="linksDiv">
<a class="links" href="index.html">Inicio</a>
<a class="links" href="https://c.tenor.com/_4YgA77ExHEAAAAd/rick-roll.gif">App</a>
<a class="links" href="#">Sobre nosotros</a>
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
Hope this helps.
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
background-color: red;
font-size: 20px;
color: white;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1>Hello World!</h1>
</div>
</body>
</html>
What are some ways that I can modify this sample of code so that the red background only covers the "Hello World!" text only by a few spaces on either side of the text?
You can do it like so:
body {
background-color: darkslateblue;
}
.wrapper{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.colorbackground {
flex-grow: 0;
text-align: center;
font-size: 20px;
background-color: red;
color: white;
padding: 0 20px;
}
<body>
<div class="wrapper">
<div class="colorbackground">
<h1>Hello World!</h1>
</div>
</div>
</body>
Learn more about flexbox
You can make the h1 inline-block, set the background colour to the h1 instead of the div and add padding to the h1
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
font-size: 20px;
color: white;
}
.colorbackground h1{
background-color: red;
display: inline-block;
padding: 0 1em 0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1>Hello World!</h1>
</div>
</body>
</html>
You can add span to wrap your text
body {
background-color: darkslateblue;
}
.colorbackground{
text-align: center;
font-size: 20px;
color: white;
}
h1 span {
background-color: red;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Color Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=colorbackground>
<h1><span>Hello World!<span></h1>
</div>
</body>
</html>
I have this image of a long line going over 2 sections in my design file and I would like to translate that with CSS. How should I go about this? should I create a layer that encapsulates both sections with an absolute position?
* {
--my-orange: rgb(255, 166, 0);
}
.timeline-container {
margin-left: 2em;
}
.timeline-container .timeline {
width: 5px;
height: 100vh;
background: var(--my-orange);
}
.checkpoint {
border: 3px solid var(--my-orange);
padding: 0.5rem;
width: 2rem;
border-radius: 2rem;
text-align: center;
transform: translateX(-1.5rem);
background: white;
position: relative;
top: calc(20vh * var(--i))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="checkpoint" style="--i: 0;">0%</div>
<div class="checkpoint" style="--i: 1;">5%</div>
<div class="checkpoint" style="--i: 2;">10%</div>
<!--more divs-->
</div>
</div>
</body>
</html>
With this design, the divs have a margin on left and on the right that I need to remove but only on .custom-mobile-row not in the rest on the page like if I use
body{
margin: 0;
}
this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
</body>
</html>
and the css
.custom-mobile-row{
width: 100%;
}
.half-row{
width: 50%;
display: inline-block;
height: 500px;
background-size: cover;
background-position: center;
vertical-align: top;
}
#media (max-width: 768px) {
.half-row {
width: 100%;
}
}
#media (min-width: 768px) {
.custom-mobile-row{
white-space: nowrap;
}
}
#div1{
background-image: url("img1.jpg");
}
#div2{
background-image: url("img2.jpg");
}
body{
margin: 0;
}
body{
margin:0;
}
.fake-body{
margin:8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='fake-body'>
</div>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
<div class='fake-body'>
</div>
</body>
</html>