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>
Related
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
#mainContainer {
display: flex;
justify-content: center;
}
#window {
min-width: 600px;
min-height: 850px;
max-width: 600px;
max-height: 850px;
display: grid;
border: 3px solid black;
grid-template-rows: 1fr 0.5fr 0.2fr;
}
#window>div {
border-bottom: 3px solid black;
}
#window div:nth-child(3) {
border-bottom: none;
}
#image {
display: flex;
justify-content: center;
align-content: center;
background-color: black;
}
#content {
display: grid;
grid-template-rows: 2fr 1fr;
}
#movieSelect {
border-top: 3px solid black;
}
#movieDetails {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
text-align: center;
}
#control {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(153, 65, 65, 0.83);
}
#mainForm {
align-self: center;
display: flex;
justify-content: space-between;
align-content: center;
}
#mainInput {
padding: 8px;
margin-right: 10px;
font-size: 20px;
border: 2px solid black;
}
#mainInput:focus {
outline: none;
background-color: rgba(0, 255, 242, 0.306);
}
/* //focus doesn't change specified background color */
#btn {
padding: 12px 24px;
border: 2px solid black;
}
#btn:active {
background-color: rgb(109, 109, 109);
}
#movieSelect {
display: flex;
overflow-x: scroll;
}
#movieSelect>button {
min-width: 118.8px;
max-width: 118.8px
}
#movieSelect>button:focus {
background-color: skyblue;
}
<!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="styling.css">
<title>Document</title>
</head>
<body>
<div id="mainContainer">
<div id="window">
<div id="image">
<img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg"
alt="">
</div>
<div id="content">
<div id="movieDetails">
<h3 class="h3Info" id="h3First">Name
<br> The Johnsons sdasd sad asdasasd as das as
</h3>
<h3 class="h3Info" id="h3Second">Rating:
<br> 89.92
</h3>
<h3 class="h3Info" id="h3Third">Release Date:
<br> 2012-12-02
</h3>
<h3 class="h3Info" id="h3Fourth">More Details:
<br> https://www.tv-wot.com
</h3>
</div>
<div id="movieSelect">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div id="control">
<form id="mainForm" action="">
<input id="mainInput" type="text" name="movieSearch">
<button id="btn">Search</button>
</form>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Hello! I am getting these ugly little white gaps when containing elements and they really just make everything very ugly and buggy looking. For example there's a random gap at the right of the black background where the image is which appears and disappears. There is another above the buttons. Also another css questions. Why is the input textarea so dark when focused even though I chose a very bright color. Thank you!
These are screen (not whole CSS) pixels sort of left behind when the system works out how to map part pixels (one CSS pixel on a modern screen can map to several screen pixels).
This snippet hacks round the problem by putting a pseudo before element on the image's containing div which has a black background and which is just slightly bigger than the element itself.
* {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
#mainContainer {
display: flex;
justify-content: center;
}
#window {
min-width: 600px;
min-height: 850px;
max-width: 600px;
max-height: 850px;
display: grid;
border: 3px solid black;
grid-template-rows: 1fr 0.5fr 0.2fr;
}
#window>div {
border-bottom: 3px solid black;
}
#window div:nth-child(3) {
border-bottom: none;
}
#image {
display: flex;
justify-content: center;
align-content: center;
background-color: black;
position: relative;
}
#image::before {
content: '';
background: black;
width: calc(100% + 2px);
height: calc(100% + 2px);
top: -1px;
left: -1px;
position: absolute;
z-index: -1;
}
#content {
display: grid;
grid-template-rows: 2fr 1fr;
}
#movieSelect {
border-top: 3px solid black;
}
#movieDetails {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-items: center;
text-align: center;
}
#control {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(153, 65, 65, 0.83);
}
#mainForm {
align-self: center;
display: flex;
justify-content: space-between;
align-content: center;
}
#mainInput {
padding: 8px;
margin-right: 10px;
font-size: 20px;
border: 2px solid black;
}
#mainInput:focus {
outline: none;
background-color: rgba(0, 255, 242, 0.306);
}
/* //focus doesn't change specified background color */
#btn {
padding: 12px 24px;
border: 2px solid black;
}
#btn:active {
background-color: rgb(109, 109, 109);
}
#movieSelect {
display: flex;
overflow-x: scroll;
}
#movieSelect>button {
min-width: 118.8px;
max-width: 118.8px
}
#movieSelect>button:focus {
background-color: skyblue;
}
<!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="styling.css">
<title>Document</title>
</head>
<body>
<div id="mainContainer">
<div id="window">
<div id="image">
<img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg" alt="">
</div>
<div id="content">
<div id="movieDetails">
<h3 class="h3Info" id="h3First">Name
<br> The Johnsons sdasd sad asdasasd as das as
</h3>
<h3 class="h3Info" id="h3Second">Rating:
<br> 89.92
</h3>
<h3 class="h3Info" id="h3Third">Release Date:
<br> 2012-12-02
</h3>
<h3 class="h3Info" id="h3Fourth">More Details:
<br> https://www.tv-wot.com
</h3>
</div>
<div id="movieSelect">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
</div>
<div id="control">
<form id="mainForm" action="">
<input id="mainInput" type="text" name="movieSearch">
<button id="btn">Search</button>
</form>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</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">
<title>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Hi everybody! I've been learning flex box but I'm having a problem with this particular example. There's a thin white space between the border and the elements, like a thin margin. I don't know why is it there and how to remove it. Can somebody help me, please?
EDIT: I'm not refering to the space-between propery, I want it, but there is a thin margin going from top to bottom, left and right that shouldn't be there
If you want to remove spacing in between, your child box div should be 1/4 of the width of the parent div, like below 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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 25%;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Is this what you want?
*{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
I have been trying to use a media query to resize some letters when the device or width of the browser screen changes.
I have checked the syntax and I have added on my main HTML:
<meta name="viewport"content="width=device-width, initial-scale=1"/> on my main HTML
The media query I am trying to implement is this one:
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
If it matters I am developing on Angular 10 in a Mac and testing with Safari and Chrome on a Mac computer and iPhone XS.
app.component.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"/>
<!-- shrink-to-fit=no -->
<title>title</title>
</head>
<body class="mat-app-background">
<div class="page">
<h1>Clock</h1>
<div class="menu-container" >
<button mat-raised-button class="clock type1">World Clock</button>
<button mat-raised-button class="clock type2">Alarm</button>
<button mat-raised-button class="clock type3">Stopwatch</button>
<button mat-raised-button class="clock type4" (click)="myFunction('hello')">Timer</button>
</div>
<div class="content">
<!-- <div class="box"> box</div> -->
<app-timer>
</app-timer>
</div>
</div>
</body>
</html>
<router-outlet></router-outlet>
app.component.css
#import url('https://fonts.googleapis.com/css2?family=Karla&family=Montserrat:wght#500&display=swap');
h1{
text-align:center;
font-size: 6em;
font-family: 'Montserrat', sans-serif;
padding-top: 40px;
padding-bottom: 20px;
}
.page{
height: 100vh;
background-color: #f1eaea;
}
.menu-container{
height: 100px;
display: flex;
border: 0px solid black;
background-color: #f1eaea;
flex-direction: row;
align-items: center;
justify-content: center;
}
.clock{
display: flex;
text-align: center;
font-family: 'Karla', sans-serif;
color: white;
font-weight: 600;
font-size: 1.6em;
line-height: 1.4;
align-items: center;
justify-content: center;
height: 80%;
width: 10em;
margin: 6px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.80);
}
.type1{
background-color: #002642;
}
.type2{
background-color: #840032;
}
.type3{
background-color: #E59500;
}
.type4{
background-color: #2A9D8F;
}
.content{
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 5vh;
justify-content: center;
height: calc(100vh - 265px);
}
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 80%;
}
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
Global css style.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
html {
min-height: 100%;
}
body{
min-height:100%;
height:100vh;
}
html, body { height: 100%; }
I can't find the way how to align both div elements at the center vertically and footer element aligned to bottom of page using flexbox.
HTML and CSS
.section {
height: 100vh;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
}
.section__header {
text-align: center;
}
.footer {
margin: auto;
max-width: 848px;
}
<section class="section contact">
<div class="container">
<div class="section__header">...</div>
<div class="contact__form">...</div>
<footer class="footer"></footer>
</div>
</section>
I tried to use almost all options without success...all what I got - all elements now is centered horizontally and vertically, but how align footer to bottom and leave all other element at center?
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.section {
display: flex;
height: 100vh;
justify-content: space-between;
flex-direction:column;
border:1px solid sienna;
}
.container {
display:flex;
justify-content:center;
flex-direction:column;
width: 100%;
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
border:1px solid black;
}
.section__header {
text-align: center;
border:1px solid maroon;
}
.contact__form{
border:1px solid blue;
}
.footer {
border:1px solid red;
}
<section class="section contact">
<div class="container">
<div class="section__header">header</div>
<div class="contact__form">contact</div>
</div>
<footer class="footer">footer</footer>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ========== Meta Tags ========== -->
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- ========== Title ========== -->
<title>stack</title>
<style type="text/css">
*,
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.section {
height: 100vh;
width: 100%;
background: green;
}
.container {
width: 100%;
height: 100%;
/*max-width: 1400px;*/
padding: 0 15px;
/*margin: 0 auto;*/
display: flex;
flex-direction: column;
justify-content: space-between;
background: blue;
}
.contentContainer {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
background: green;
}
.section__header {
/*text-align: center;*/
background: grey;
}
.contact__form {
background: violet;
}
.footer {
height: 20%;
width: 100%;
background: yellow;
/*margin: auto;*/
/*max-width: 848px;*/
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<div class="contentContainer">
<div class="section__header">header</div>
<div class="contact__form">form</div>
</div>
<footer class="footer">footer</footer>
</div>
</section>
</body>
</html>
Make a separate container for the contents and use space-between.
On my home page I have a full width background image, however, my content won't display below it. Rather, it is displaying over top of the background image. Can anyone help me make my content display below my background image?
This is my html code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: absolute;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
</body>
</html>
Make it a real background image (in the CSS rule, not in an image tag), remove the absolute position for that DIV and give it 100% height:
html,
body {
margin: 0;
height: 100%;
}
.homepage-backgroundimage {
background: url(http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg) center, center;
background-size: cover;
height: 100%;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
<div class="homepage-backgroundimage"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
Put position:relative instead of position:absolute
Here is the code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: relative;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>