(Edit) Please view the codepen here.
I am making a card stack with Vue.js and flex box to display various apps on my website. I use a component for each card and use Vues' for function to render cards with the following template html:
<div class="card">
<img src="">
<h1>Title</h1>
<a>Click</a>
</div>
This component is called "app-card". I render the cards within the following HTML:
<div id="app">
<div class="row">
<div id="card-container">
<app-card> <!--Above HTML from template goes here--> </app-card>
</div>
<div id="main"></div>
</div>
</div>
I use the following SASS (CSS without the { } in this case) for my card deck:
*
margin: 0
padding: 0
font-family: 'Montserrat', sans-serif !important
box-sizing: border-box
.row
display: flex
flex-wrap: wrap
justify-content: space-evenly
align-items: auto
#card-container
flex: 10%
#main
flex: 90%
.card
width: 100%
margin-top: 0;
margin-bottom: auto;
.card img
width: 100%
max-width: 100%
.card a
padding: 10px
background: blue
However the top of the next card in the deck cuts of the bottom of the button of the above card as shown in this image:
How would I go about fixing this? I've just started learning flex-box after having used Bootstrap-4 for years.
You can fix this by adding margin-bottom property in card class.
* {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif !important;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: auto;
}
#card-container {
flex: 10%;
}
#main {
flex: 90%;
}
.card {
width: 100%;
margin-bottom: 50px; /* Add Margin Bottom */
}
/* For last card no margin bottom */
.card:last-child{
margin-bottom:0;
}
.card img {
width: 100%;
max-width: 100%;
}
.card a {
padding: 10px;
background: blue;
}
<div class="row">
<div id="card-container">
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
<div class="card">
<img src="https://img.itch.zone/aW1nLzQyNTE2MjcucG5n/315x250%23c/NpEkhf.png">
<h1>Title</h1>
<a>Click</a>
</div>
</div>
<div id="main">
</div>
</div>
.card a {
padding: 10px;
background: blue;
display:block;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
I'm trying to have my divs in a tic tac toe sort of way, where it’s just a 3 by 3 grid, and it works fine, just until I type in a letter or something inside the div. Anyone know why and how to fix it?
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font: Arial 14px;
}
#blocks {
background-color: red;
width: 50px;
height: 50px;
display: inline-block;
margin-right: 6px;
}
#canvas {
margin-left: 40%;
}
<div id="canvas">
<div id="blocks"></div>
<div id="blocks"></div>
<div id="blocks"></div><br>
<div id="blocks"></div>
<div id="blocks"></div>
<div id="blocks"></div><br>
<div id="blocks"></div>
<div id="blocks"></div>
<div id="blocks"></div>
</div>
Apply margin-bottom to the divs.
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font: Arial 14px;
}
#blocks {
background-color: red;
width: 50px;
height: 50px;
display: inline-block;
margin-right: 6px;
margin-bottom:6px;
}
#canvas {
margin-left: 40%;
}
<div id="canvas">
<div id="blocks">x</div>
<div id="blocks">x</div>
<div id="blocks">x</div><br>
<div id="blocks">o</div>
<div id="blocks">o</div>
<div id="blocks">o</div><br>
<div id="blocks">x</div>
<div id="blocks">o</div>
<div id="blocks">x</div>
</div>
You should probably use grid or flexbox. Something like this:
body,
html {
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
font: Arial 14px;
}
.blocks {
background-color: red;
/* Center content within each cell */
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
#canvas {
max-width: 200px;
margin: 1rem auto;
/* Achieve layout using grid */
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(3, 50px);
gap: 1rem;
}
<div id="canvas">
<div class="blocks"><span>1</span></div>
<div class="blocks"><span>2</span></div>
<div class="blocks"><span>3</span></div>
<div class="blocks"><span>4</span></div>
<div class="blocks"><span>5</span></div>
<div class="blocks"><span>6</span></div>
<div class="blocks"><span>7</span></div>
<div class="blocks"><span>8</span></div>
<div class="blocks"><span>9</span></div>
</div>
I changed the blocks ids to classes. Also added some styles of my own to center the content inside each grid cell (added span tags within each cell div for that).
try that:
body {
font : Arial 14px;
}
#canvas {
--sz_blk : 50px;
--in_blk : 6px;
width : calc((var(--sz_blk) * 3) + (var(--in_blk) * 6));
margin : auto;
}
#canvas > div {
background-color : red;
width : var(--sz_blk);
height : var(--sz_blk);
margin : var(--in_blk);
display : block;
float : left;
text-align : center;
line-height : calc(var(--sz_blk) / 5 * 4)
}
<div id="canvas">
<div>x</div>
<div>x</div>
<div>x</div>
<div>o</div>
<div>o</div>
<div>o</div>
<div>x</div>
<div>o</div>
<div>x</div>
</div>
HTML CODE
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<img src="img\xii.jpg" alt="phone1" />
<section class="section1">
<p>Xiaomi X15</p>
<br />
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<br />
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
CSS CODE
.flex-container {
display: flex;
background-color: #fff;
border: 2px solid black;
flex-wrap: wrap;
}
.wrapper {
width: 100px;
max-width: 960px;
margin: 0 auto;
}
.one p {
position: absolute;
bottom: -350px;
color: white;
font-size: 50px;
left: 500px;
text-align: center;
font-weight: lighter;
font-family: calibri;
}
.section1 h2 {
position: absolute;
bottom: -500px;
left: 300px;
color: white;
}
please help im a beginner in css and this is my first stackoverflow post
my texts are not horizantally in place and keeps breaking down that each word forms a new paragraph how can i solve this please? i have tried the display:inline- block but it didnt work.as you can see from my code i made the div tag that the image is on to be position relative so i can move the h2 and span and button elements to be nn the image. i intend on using flexbox because on i want to position more images to be on the side of the initial image
What you can do is:
Define some width and height (max-width and min-width to be more flexible) for your box;
Use background-image CSS prop instead of HTML <img />, which will ensure the image fills the background of your container;
Use flex-box with its all properties to lay out your elements. There will be no need for position: absolute for the text and header.
Other notes to your code: there are some closing tags missing in your HTML as well as closing } braces in the CSS. That is never a good practice to leave your code without them, even though in some cases the browser can fill them out for you.
Here is an example of how you can achieve what you were asking about:
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto ;
display: flex;
justify-content: space-between;
}
.flex-container{
display: flex;
background-color:#fff;
border: 2px solid black;
flex-wrap: wrap;
width: auto;
height: 200px;
min-width: 100px;
max-width: 400px;
}
.one {
background-image: url('https://cdn.thewirecutter.com/wp-content/uploads/2018/05/smartphone-tp-top-2x1-lowres1024-7951.jpg');
background-size: cover;
}
.section1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.section1 p{
color: white;
font-size: 25px;
text-align: left;
font-weight: lighter;
font-family: calibri;
padding: 10px;
margin: 0
}
.section1 h2{
color: white;
padding: 10px;
margin: 0
}
button {
max-width: 100px
}
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
I've been working on a website for the past few hours and recently I added an image grid using CSS3 Flexbox. However I've been having trouble centering it for the past few hours.
I've tried using justify-content: center to center it as well as margin: 0 auto but nothing works.
What am I doing wrong?
Here's my code
HTML
<div class="gallery">
<h3>Gallery</h3>
<div class="tiles">
<div class="row">
<div class="column">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Mahatma-Gandhi%2C_studio%2C_1931.jpg">
<img src="https://www.biography.com/.image/t_share/MTYyNzM4ODIyODY0NDQ2NTA0/gandhi-spiritual-leader-leading-the-salt-march-in-protest-against-the-government-monopoly-on-salt-production-photo-by-central-pressgetty-images.jpg">
</div>
<div class="column">
<img src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/201911/Mahatma_Gandhi-770x433.png?DtfYcyk4yzMDy1GNsIJaQgX7mrBoqTQO">
<img src="https://images.news18.com/ibnlive/uploads/2018/10/Mahatma-Gandhi2.jpg">
</div>
<div class="column">
<img src="https://images.livemint.com/img/2019/10/02/600x338/gandhi_1570037914879.JPG">
<img src="https://m.telegraphindia.com/unsafe/620x350/smart/static.telegraphindia.com/derivative/THE_TELEGRAPH/1671172/16X9/image34ba57f1-21d2-4af6-ad21-b9c036e39194.jpg">
<img src="https://img.etimg.com/thumb/msid-67754218,width-640,resizemode-4,imgsize-184267/he-whom-leaders-looked-up-to.jpg">
</div>
</div>
</div>
</div>
CSS
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.gallery {
height: auto;
width: 100%;
text-align: center;
}
.gallery h3 {
font-size: 60px;
margin-bottom: 40px;
}
.tiles {
display: block;
width: 100%;
margin: 0 auto;
}
How do I center the tiles div?
if you want to have 3 columns in the center of you screen, you have to:
put the display: flex; justify-content: center in the .tiles class
change the column width property to width: 33% and removing the max-width: 25%
give to your .row class the width you want, or the max-width, like max-width:75%
I have a pay layout which works how I want to when using the .slides element has a background colour and height, it flexes as expected, however when I switch to filling it with an image this behaviour breaks as the images won't resize and I can't get my head around how to make them resize.
The idea is the left column of text remains fixed size, and the right column flexes up and down, eventually snapping under the left column at small sizes.
The reason for using an <img> and not a background image is because there is a image slide show that I want to put in here.
Can anyone help fix this issue?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-wrap: wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Changes made:
Enabled responsiveness for img elements
Commented out the flex-wrap: wrap
Set #media queries to define when the wrapping inside the .container div takes place
body {
margin: 1em;
}
p {
margin: 0;
}
img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontally responsive */
max-height: 100vh; /* vertically responsive */
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
/*flex-wrap: wrap;*/
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex: 1 1 auto;
min-width: 15em;
max-width: 800px;
}
.caption {
margin-top: .25em;
}
#media (max-width: 33em) { /* 2 x 15em (.text & .images) + 2em (left & right margin of the body element) + 1em (.text margin-right) */
.container {flex-wrap: wrap}
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800">
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
Do you mean something like this ?
body {
margin: 1em;
}
p {
margin: 0;
}
.container {
display: flex;
margin-top: 1em;
width: 100%;
flex-flow:row wrap;
}
.text {
flex: 0 0 auto;
width: 15em;
margin-right: 1em;
}
.images {
flex:1 0 15em;
min-width: 15em;
max-width:800px;
}
.slides {
display:flex;
}
.caption {
margin-top: .25em;
}
<div class="header">
Title
</div>
<div class="container">
<div class="text">
<p>Something about this project is really interesting.</p>
</div>
<div class="images">
<div class="slides">
<img src="https://via.placeholder.com/800x800" />
</div>
<div class="caption">
<p>Text about this project</p>
</div>
</div>
</div>
On a specific range of screen sizes (in the low 1000s), I have a content div that will move over a navigation div completely. It's as if both divs begin at the top of the page.
Here is the HTML:
<body id="about">
<div class="topnav" id="myTopnav">
Home
About
Contact
</div>
<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>
Here is the relevant CSS:
#media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
Why would the row div move on top of the myTopnav div?
You have given your #myTopnav an absolute position. This takes it out of the flow of page.
It means you must handle spacing other elements so they do not to overlap the absolutely positioned ones.
In your case, you need to give your row class a margin that matches the height of #myTopnav element.
Since row is a class that is probably used in many places, you should probably add a new css class and use that to set the spacing. e.g.
<div class="row with-spacing">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
CSS:
#media screen and (min-width: 993px) {
.row.with-spacing {
margin-top:50px;
}
}