*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
justify-content: center;
align-items: center;
display: flex;
}
.container{
background: black;
width: 400px;
height: 300px;
align-items: center;
justify-content: center;
display: flex;
}
.smallerContainer{
width: 200px;
height: 50%;
background: rgb(68, 0, 0);
overflow-y: scroll;
}
.circle {
height: 64px;
width: 64px;
filter: drop-shadow(0 0 30px rgb(0, 255, 0));
}
<html>
<head>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<div class="container">
<div class="smallerContainer">
<img class="circle" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png">
<img class="circle" src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png">
</div>
</div>
</body>
</html>
I have a div, where i got some little images that "glow", but they are also in another div which is set on "overflow-y: scroll;" and there the "green glow" is cut and dont want it to be cutted off please help D:
Related
I am sure this is really easy but I am facing issue the image is overflowing the card-box section
Wanted to achieve similar to this
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!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>Product</title>
</head>
<body>
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
tried to change height and width of container, tried changing display of image class to block but no change is shown in output
My output:
enter image description here
Expecting
enter image description here
I'm not sure flex is the best answer to do that. Personally I would prefer grid.
Display grid for the card, position left and right (image, details) inside.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body {
background-color: hsl(30, 38%, 92%);
}
.container {
display: flex;
justify-content: center;
position: relative;
z-index: -1;
border: 1px solid black;
}
.product {
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: auto;
}
.details {
grid-area: 1 / 2 / 2 / 3;
}
img {
max-width: 100%;
height: 100%;
border-radius: 1.5em 0 0 1.5em;
}
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
This may be a way to solve it: just add style="overflow:hidden;" to your code. Or you can try to use "border-radius:20px;" to hide it.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!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>Product</title>
</head>
<body>
<div class="container">
<section class="card-box" style="overflow:hidden;">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!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="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
Hey! Thanks for reading! I've got a web-app login screen. I'm focusing on creating a responsive app-like login page. (no scroll etc)
Issue description:
With a viewport-width of 300px, at 463px and shorter viewport heights, all items fill the entirety of the screen, and the content at the bottom of the page begin to get cut off.
The same can be said with 528px and 650px height.
(so this tells me it's scaling to a particular aspect ratio (phone portrait to relatively squarish aspect ratios. At landscape aspect-ratios, the images become ridiculously big - ...expected but undesired))
Goal: Instead, I would simply like the images to shrink in height and maintain their aspect ratio when the viewport height is changed. (to support the aspect ratio provided by the flex-grow/shrink) as opposed to overflowing and changing that ratio.
note: For those who'd like a simpler example: I think the example is relatively simple. Could it be simpler?, yeah most likely. I'm, not entirely sure what I'd make simpler though.
Codepen: https://codepen.io/gold240sx/pen/eYVdGag (I might suggest to turn devtools on to get a thin width since the design right now is really meant for portrait phones.)
It's quite a bit easier just to copy and paste into whatever editor you prefer.
ORIGINAL:
<!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>
<style>
* {
box-sizing: border-box;
}
body {
height:100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100%;
}
.images{
background-color: aqua;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
flex-grow: 3;
flex-shrink: 3;
}
span img {
max-width: 100%;
max-height: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
display: flex;
max-width: 70%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
max-width: 90%;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
.allButtons {
background-color: rgb(255, 132, 0);
display: flex;
flex-direction: column;
border: 2px red solid;
flex-grow: 2;
flex-shrink: 2;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
background-color: rgb(249, 149, 0);
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 20px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="images" style="background-color: aqua; width: 100%; flex-grow: 3; flex-basis: 1;">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
UPDATED CSS (loosely based upon the initial answer provided by Chizaram) - image scale achieved - image aspect ratio not guaranteed yet -:
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mainImage img,
.secondaryImage img {
max-height: 100%;
max-width: 100%;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
max-width: 90vw;
max-height: 40%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 10px;
display: block;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
UPDATE:
Do not forget to remove the old inline styles you declared in the .images div, so they don't revert to previous styling:
<div class="images">...</div> <!-- Remove old inline styles -->
ANSWER:
To achieve this, here are the changes you need to make to your code:
(Please note that I use ellipsis ... to indicate segments of the original code which I did not change, and also for brevity.)
Remove flex properties from the body selector as they are not necessary here. The .container div houses everything on the page. I also cleaned the body rule-set a little by moving the padding and margin properties to the universal selector rule-set as well as using the briefer overflow declaration.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
Leave flex properties in the container selector instead and change its height to 100vh to take up full viewport of the screen.
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
Give the .images div a height of 70vh and set the vertical and horizontal alignments to center. I also removed the flex-grow and flex-shrink properties because they were not necessary in order to achieve the desired result.
.images {
...
height: 70vh;
display: flex;
flex-direction: column;
justify-content: center; /* Vertical alignment in column flex-direction */
align-items: center; /* Horizontal alignment in column flex-direction */
}
Set max widths and heights for center images and their parent divs (totaling 100%). Flex and positioning properties aren't necessary here as well since they are affected by their parent div (.images).
.mainImage {
...
max-width: 60%;
max-height: 60%;
margin: 0 auto;
}
.secondaryImage {
...
max-width: 60%;
max-height: 40%;
margin: 0 auto;
}
Set object-fit type to contain for images. I've also changed the elements from spans to divs to structure the html better. The styles here were previously within the span img rule-set. Copy its styles in this new rule-set and delete it.
.mainImage img,
.secondaryImage img {
...
object-fit: contain;
}
Set the height of the .allButtons div to 30vh to take up the remaining height of the viewport.
.allButtons {
...
height: 30vh;
...
}
Reduce padding for buttons on smaller screen sizes to solve the height problem. I added in a media query to adjust to original button size on larger screens. Feel free to adjust the breakpoint height to any value you desire.
button {
...
padding: 10px;
...
}
#media screen and (min-height: 620px) {
button {
padding: 20px;
}
}
The HTML
<div class="mainImage">
...
</div>
<div class="secondaryImage">
...
</div>
I think I have It!! Both Portrait and Landscape. Granted, because of the use of vh / vw, It may have issues with mobile-browser header bars. :/ Maybe there's some Hacky way to fix. but yeah this is looking good so far. I'd have to test on mobile to see further. Galaxy fold it seems to cut off just a bit off the bottom (just a few px.) In addition, Id take all this CSS and wrap it into a media screen itself, then transitioning into a scrollable webpage... or maybe not. Anyways here's the code... Thank you Chizaram for all you're help! I'm gonna buy you a gift card on payday if you like!
ANSWER:
<!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>webApp</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height:100%;
width: 100%;
overflow: hidden;
}
.container {
background-color: rgb(162, 162, 162);
display: flex;
flex-direction: column;
min-height: fit-content;
height: 100vh;
}
.images{
background-color: aqua;
flex-grow: 1;
flex-shrink: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.mainImage img,
.secondaryImage img {
object-fit: contain;
display: flex;
justify-self: center;
}
.mainImage img {
max-height: 25vh;
}
.secondaryImage img {
max-height: 20vh;
width: 100%;
max-width: 90vw;
}
.mainImage {
background-color: rgb(128, 248, 0);
max-height: 60vw;
margin: 0 auto;
display: flex;
justify-content: center;
object-fit: contain;
}
.secondaryImage{
background-color: rgb(133, 201, 153);
min-height: 30%;
width: 90vw;
max-height: 40%;
margin: 0 auto;
display: grid;
align-content: center;
object-fit: contain;
}
.allButtons {
display: flex;
flex-direction: column;
border: 2px red solid;
height: 30vh;
flex-grow: 2;
flex-shrink: 1;
}
.mainButtons{
display: flex;
flex-direction: column;
width: 70%;
justify-content: space-evenly;
/* background-color: rgb(249, 149, 0); */
padding: 5px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 100%;
}
button {
background-color: rgb(205, 205, 0);
border: black solid 2px;
border-radius: 5px;
width: 100%;
color: white;
padding: 2em;
display: block;
min-width: fit-content;
}
.bottomButtonContainer {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
margin-top: auto;
}
.bottomButton {
background-color: rgb(101, 103, 0);
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 40px;
}
#media only screen
and (max-device-width: 1023px)
/* and (min-device-pixel-ratio : 2.0) */
and (orientation: landscape) {
button {
padding: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="images">
<span class="mainImage">
<img src="https://i.ibb.co/5YMMtJT/circle-logo-color.png" alt="circle-logo-color">
</span>
<span class="secondaryImage">
<img src="https://i.ibb.co/H4qPCc9/logo-color.png" alt="logo-color">
</span>
</div>
<div class="allButtons">
<div class="mainButtons">
<button>SIGNUP!</button>
<button>LOGIN!</button>
</div>
<div class="bottomButtonContainer">
<button class="bottomButton" style="white-space: nowrap;">LEARN MORE</button>
</div>
</div>
</div>
</body>
</html>
I have put this code on the board class to organize the < div > in the class.
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
However the justify content doesn't work... both div inside board class glued each other. but the align-items and flex-flow works well, why justify-content doesn't?
Here is my website looks like currently
my HTML code:
<!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" type="text/css" href="style.css">
</head>
<body>
<main>
<header>
<h1>Draw clues about the music playing </h1> <img src="images/v94_61.png">
</header>
<div class="board">
<div class="color-board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="drawer">
</div>
<div class="tool-board">
</div>
</div>
</main>
</body>
</html>
my css code:
body {
margin: 0px;
background: linear-gradient(rgba(218, 210, 153, 1), rgba(176, 218, 185, 1));
background-repeat: no-repeat;
background-size: 100% 100%;
}
main {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
margin: 10px;
padding: 15px;
overflow: hidden;
}
header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: fit-content;
height: fit-content;
border-radius: 1.75em;
background-color:rgba(131, 131, 131, 0.4000000059604645);
margin-bottom: 2%;
padding: 0px 5%;
}
header img {
width: "fit-content";
height: 90px;
}
header h1 {
vertical-align: middle;
white-space: nowrap;
min-width: 270px;
}
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
.color-board{
display: flex;
flex-flow: row wrap;
align-items: center;
background-color: rgba(131, 131, 131, 0.4000000059604645);
width: 100px;
height: fit-content;
}
.color-board div {
width: 30px;
height: 30px;
margin: 5px;
border: 1px black solid;
border-radius: 0.5em;
background-color: white;
}
.drawer{
background-color: white;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
width: 732px;
height: 352px;
}
How do I center an image in a circle around it? The circle should then lie behind the picture and only frame it.
HTML
<div>
<div class="circle"></div>
<img src="../../assets/img/img.png" alt="" class="showslide">
</div>
CSS
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #fff;
border-radius: 50%;
z-index: -1;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
Do you need to keep the circle div as a sibling of the image?
Because if you put the image inside the circle div, your code it´s already working:
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #000;
border-radius: 50%;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="circle">
<img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>
I've removed the z-index (not needed in this case) and changed the border color to black.
Not quite sure what you are trying to accomplish here but as far as I understood, ur trying to make the frame unclickable. First of all, you can't keep the frame behind the picture because then the image gets in front of it and keeps it hidden.
pointer-events: none;
Set this for the frame and it should be good.
How do I center an image in a circle around it?
One approach would be to apply two CSS properties to the <img>:
a border
an outline
Working Example:
.my-image {
width: 144px;
height: 144px;
border: 18px solid rgb(255, 255, 255);
border-radius: 50%;
outline: 1px solid rgb(191, 191, 191);
}
<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
<h4>Center Image</h4>
<div class="image-container">
<img
src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
width="100"
/>
</div>
<!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>
</head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
}
</style>
<body>
<h4>Center Image</h4>
<div class="image-container">
<img class="image-container"
src="i.jpg"
width="100"
/>
</div>
<input type="file" >
</body>
</html>