I have been working on my website for a while to start learning HTML, CSS, and Java. I'm not sure how to position and resize this cube on other devices correctly. I believe the issue is the use of pixels, but how would I make it stay a square and be centered with a percent?
On 1080x1920 Monitor:Cube
On iPhone 13 pro max:Cube in iphone pro max.
I haven't found anything to help fix my problem. Here is the code I used.
#Square {
position: absolute;
height: 45%;
width: 45%;
border-radius: 5%;
}
<!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>Hieroglyphic > Home</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body style="background-color: rgb(210,210,210); ">
<div id="Main" style="position: absolute; height: 500px; width: 500px; top: 15%; left: 32%">
<div id="Square" style="background-color: rgb(173, 18, 18);"> </div>
<div id="Square" style="background-color: rgb(18, 116, 173); left: 52%;"> </div>
<div id="Square" style="background-color: rgb(18, 173, 57); top: 52%;"> </div>
<div id="Square" style="background-color: rgb(224, 221, 13); left: 52%; top: 52%;"> </div>
</div>
</body>
</html>
Related
I have two images that need to be at the bottom of a div and behind a gradient that needs to have the same rules both can be fixed with position: absolute; bottom: 0; but it moves the images in front of the gradient
The reason for this approach is that I need the page to be responsive with different resolutions for PCs
How it is now
How I want it
Gradient CSS Code:
.gradient {
position: absolute;
bottom: 0;
background-image: linear-gradient(0deg, #000000, transparent);
width: 100%;
margin-top: 43.5%;
height: 13.8%;
}
Images CSS Code:
.images {
width: 95%;
margin: auto;
padding: 4% 0 0 0;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: 0;
}
Html of the whole page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Montserrat:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="icon.png">
<title>Creature Cult</title>
</head>
<body>
<div class="banner">
<div class="gradient"></div>
<div class="navbar">
<img src="banner.png" alt="logo" class="logo">
<ul>
<li>About</li>
<li>Team</li>
<li>Socials</li>
</ul>
</div>
<div class="explore">
<img src="explore.png" alt="explore" class="explore">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow" class="arrowBTN">
</div>
<div class="images">
<img src="rabbit.png" alt="rabbit" class="rabbit">
<img src="penguin.png" alt="penguin" class="penguin">
</div>
</div>
<div class="about">
</div>
</body>
</html>
Add a z-index on .gradient (z index 1) .images (z index 0) in order to fix display layers order
This question already has answers here:
Is it wrong to change a block element to inline with CSS if it contains another block element?
(9 answers)
Closed 2 years ago.
I'm tryng to show two inline div, each div is wrapping 2 block divs, my question here is
Why the inline divs arent showing the background, even when they have children, until I type something inside, the background is showing but only in the text, no wraping the children.
Here's my code:
.container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline;
}
<!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="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
showing BG
</div>
</body>
</html>
Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.
In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.
Also - there does not seem to be a "flex-container" class on any of the elements.
.flex-container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline-block; /* I changed this to inline block */
}
<!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="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
Hi I have simple question with example. How can I achieve automatic shrinking image inside my flexbox when height is not enought for the image?
I have to do full screen app as in my example where image should fill as most place as it possible with image original aspect ration. When the space is not enought (Height is going to be smaller) Image should start shrinking IN HIS HEIGHT.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
My code:
https://codesandbox.io/s/keen-tdd-952kv?file=/index.html
Explicitly setting the overflow property of the flex child solves this issue.
In your example, setting the overflow property of the .img-container element is what's needed.
While setting that element's max-height to 100vh would work for this isolated example, it almost certainly wouldn't be a workable solution if there were any other content on the page.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
overflow: hidden; /* <-- */
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
If you use view height (vh) instead of % it should work I think.
.cust-container img {
max-height: 100vh;
width: auto;
max-width: 100%;
}
I want my header to be a full screen background.
Code works on other sites that i previously made but now it doesn't work.
Please help.
The code is same on other websites. And it works.
Here is my html5 and css3:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
header {
background: url('./pics/bg1.jpg') 50% 50% no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome | SoundNet</title>
<meta name="theme-color" content="#6699ff">
<!--Meta-->
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-capable=yes">
<!--Js-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Categories</li>
<li>Playlists</li>
<li>Login</li>
</ul>
</div>
<div class="logo">
<span class="border-n">N</span>ESTA
<div class="button">
Sign Up
</div>
</div>
</header>
<section>
<div class="party">
<h3>Get the party started</h3>
<p></p>
</div>
</section>
</body>
</html>
[Edit: Added snippet but no image, for the moment.]
Define a height for the body. 100% height and width takes its parent height and width.
Because your body dont have both a width and height, the 100% height and width of your header won't have any effect.
Snippet
html, body {
width: 100%;
height: 100%;
margin: 0;
}
header {
height: 100%;
width: 100%;
background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<header></header>
I have a menu with a fixed position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>My App</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
body {
margin: 0;
}
.parent {
position: relative;
max-height: 100vh;
padding-top: 3rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.menu {
position: fixed;
top: 0;
width: 100%;
background: pink;
text-align: center;
height: 3rem;
}
</style>
</head>
<body>
<div class="parent">
<nav class="menu">Menu</nav>
<div style="height:100vh; background: yellow">1</div>
<div style="height:100vh; background: green">2</div>
<div style="height:100vh; background: red">3</div>
<div>
</body>
</html>
http://jsbin.com/xojarekano
On mobile safari, you can scroll and the menu stick to the top, as expected.
But if you add to home screen, and then launch the site from there, when you scroll, the menu get drifted, disappears then appear again. I have tried adding translateZ(1px) into the menu class but the problem still exists.
Why does this behave differently when it's launched from home screen as opposed to inside mobile safari. How can be this fixed?