I have a nice looking card, I want to make it a little bit smaller.
:root {
--links: yellow;
}
#header {
text-align: center;
}
#links {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
/* 5px rounded corners */
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding:
<div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
<img src="onetap_master.jpg" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Onetap Master Config</b></h4>
<p>Receive the config, lifetime updates & premium javascripts</p>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css#latest/dist/dark.min.css">
<script src="https://autobuy.io/js/embed.min.js"></script>
The card is width wise just a bit to long and I'm wondering if it's possible to make it either more narrow or just smaller in general
Handle it with percentages?
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
width: 50%;
}
Like this?
<div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
<img src="onetap_master.jpg"alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Onetap Master Config</b></h4>
<p>Receive the config, lifetime updates & premium javascripts</p>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css#latest/dist/dark.min.css">
<script src="https://autobuy.io/js/embed.min.js"></script>
<style>
:root {
--links: yellow;
}
#header {
text-align: center;
}
#links {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
width: 40%;
height: 35%;
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding:
</style>
This is a Bootstrap card. You can resize it using these resize options from Bootstrap:
Card Sizing
Give the card class a width what you want, it will resize the card. And give the image fixed height.
:root {
--links: yellow;
}
#header {
text-align: center;
}
#links {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
width: 500px;
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 10px;
}
<div class="card" button data-autobuy-product="62011137-f68d-4855-6346-08d8082eae6a">
<img src="https://source.unsplash.com/random" alt="Avatar" style="width:100%; height: 300px;">
<div class="container">
<h4><b>Onetap Master Config</b></h4>
<p>Receive the config, lifetime updates & premium javascripts</p>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css#latest/dist/dark.min.css">
<script src="https://autobuy.io/js/embed.min.js"></script>
Your Q is very "wrong" - This issue not related specifically to this card.
The card is a simple div. div is a block element:
block-level element occupies the entire space of its parent element
(container)
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
.card {
width: 25%;
}
or
.card {
width: 100px;
}
Now what? (How to add more cards one next to each other? How to make this responsive...)
My advice to you is to follow some basic HTML-CSS course and later learn about CSS layout (Flexbox & CSS grid).
Card Height & Overflow
Fixed height (300px, 30% or 20em) may cause overflow issues("content overflows an element's box") .
Some solutions: Use min-height instead of height -or- define overflow property.
<div style="background:red; height: 60px;">
<p>text overflow issue</p>
<p>text overflow issue</p>
<p>I am out of the card</p>
</div>
You can use the width property in your CSS to resize the height of your div.
.card {
width: [specify width here];
}
width can be specified using px,cm, %, etc, according to your needs. You can read more here.
Related
I created a div with a border-radius 4% and wanted to add a div inside it. But now the border-radius is getting affected. How can I add the new div without affecting the previous border-radius.
If I add same border radius for the inner div
Without any border-radius
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
Overflow hidden will cut off any content that goes outside of the parents border, including any overlap at the corners.
overflow: hidden;
This is sometimes not a viable solution (Where you require content to overflow or extend the container) however since you have a fixed size, it is valid in this case.
body {
background: #4FA2AD;
}
.upper {
background-color: #035961;
height: 30%;
}
.main {
background-color: antiquewhite;
height: 50vh;
width: 25%;
margin: 25vh auto;
border-radius: 4%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
overflow: hidden;
}
<body>
<div class="main">
<div class="upper">
</div>
</div>
</body>
My button margin isn't fitting into my div. Here's the relevant HTML and CSS.
.card {
justify-content: flex-start;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
margin: 8px;
}
.card {
margin-bottom: 16px;
padding: 0px 8px;
float: left;
}
.button {
border: none;
padding: 8px;
color: white;
background-color: black;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.title {
color: grey;
}
.container {
padding: 0px 16px;
}
.card > img {
width: 100%;
}
<div class="ccard">
<div class="card">
<img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
<p>janedoe#cabbagedude.com</p>
<p>
<button class="button">Contact</button>
</p>
</div>
</div>
</div>
It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.
Here's what it looks like for me.
You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.
Hi I am designing a blog site using pure html and css and I have some design in mind. Currently it looks like before graph and I would like to achieve after graph. Right now all these classes are in inline-block and I do not want to change the dom structure. Please refer to this code snippet for implementation:
https://jsfiddle.net/yueeee/vb1we2tk/4/
.container {
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
position: relative;
display:inline-block;
height: 100%;
width: 10%;
max-width: 200px; /*in large resolution dont always want width to be 12%*/
margin-right: 40px;
/* background-color: transparent; */
padding: 0px 10px;
text-align: right;
vertical-align:top; /*always align to the top of container*/
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
vertical-align:top; /*always align to the top of container*/
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
The difficulty I met is how do I set metadata's height equals to content. I checked solution on setting container as table and metadata/ content as table-cell. However, it would cause some other styling issue so I still want to keep everything as inline-block. The other way I am thinking is to set the height of metadata equal to container. It failed because container does not height attribute. I tried something like setting height = 100% cause I do not want a stable height but also did not work.
Need your advice.
Before:
After:
The best choice in these cases is to use the flex property. I added some Properties to both the .container and .meta selectors and deleted some, act like code to get the desired result.
.container {
display: flex;
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 10%;
margin-right: 40px;
padding: 0px 10px;
text-align: right;
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
I'm trying center a Block grid inside of a div, but when I apply my CSS class the Block grid is not affected.
I have this visually (The outline is made with a Firefox extension):
Block grid alligment
and I wanna make look like this:
Block grid alligment
As you can see, I need align te Block grid content and the div content also, but I don't know how I can do it.
This is my current code:
<div class="sitios-amigos">
<div class="wrap row small-up-1 medium-up-4">
<div class="column column-block tarjeta-material">
<a src="http://www.conacyt.gob.mx/" target="_blank"><img alt="Página web Conacyt" src="img/conacyt.png"/></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.concytep.pue.gob.mx/" target="_blank">
<img alt="Página web de Concytep" src="img/concytep.png"></a>
</div>
<div class="column column-block tarjeta-material">
<a href="http://www.viep.buap.mx/" target="_blank">
<img alt="Página web VIEP BUAP" src="img/VIEP.png"></a>
</div>
</div>
</div>
CSS:
.sitios-amigos{
background: red;
max-width:11000px;
width: 100%;
margin: 0 auto;
}
.wrap{
width:90%;
max-width:11000px;
margin: 0 auto;
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}
.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
If the div you want to align center is a child of another div. Here is what you can do.
.parent-div {
text-align: center;
.child-div {
display: inline-block;
}
You can also try without referencing the parent div.
.child-div {
margin-left: auto;
margin-right: auto;
}
center it in the absolute middle try:
.parent-div {
position: relative;
.child-div {
position: absolute;
top: 50%;
/* this will put the left edge at 50%. not the image */
left: 50%;
/* do a negative margin-left of half the width of your block so you have to find that.*/
margin-left: -halfthewidth;
margin-top: -halfthelength;
}
have you tried using bootstrap grid system ? they have so much sample and much easier to use ..
I am trying to get an image to float to the right of my div with a little space around the edges. I want the image to fill the majority of the div but with space for the link 'view project' beneath it. I've tried different floats, widths and even adjusted padding but still cannot get it to work. Can anyone tell me how to rectify this? Many thanks in advance. This is the page link if needed: http://me14ch.leedsnewmedia.net/portfolio/design.html
HTML:
<div id="middle">
<div class="section group">
<div class="block-1">
<h2>Logo Redesign & Style Guide</h2>
<p><h3>This brief involved...</h3></p>
<div class="snapshot">
<img src="portfolioresources/scenelogo.png">
View Project
</div></div>
<div class="block-2">
<h2>TV Idents</h2>
<p>This brief involved...</p>
View Project
</div>
</div>
<div class="section group">
<div class="block-3">
<h2>Web Banners</h2>
<p>This brief involved...</p>
View Project
</div>
<div class="block-4">
<h2>Multiformat Campaign</h2>
<p>This brief involved...</p>
View TV Idents
</div>
</div>
</div>
And the CSS for this particular bit (although inspect element might show other things that are affecting my divs):
/* design page grids */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.colu {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.colu:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.colu {
margin: 1% 0 1% 0%;
}
}
#media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
/* style grids */
#middle {
width: 90%;
margin: 0px auto;
padding: 10px;
}
.block-1 {
background-color:#ECECEC;
width: 80%;
margin: 0px auto;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
height: 200px;
padding: 10px;
}
.block-2 {
background-color: white;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-top: 2px solid #FADBC8;
border-bottom: 2px solid #FADBC8;
height: 200px;
padding: 10px;
}
.block-3 {
background-color:#ECECEC;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
height: 200px;
padding: 10px
}
.block-4 {
background-color: white;
width: 80%;
margin: 0px auto;
margin-top: 20px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-top: 2px solid #FADBC8;
border-bottom: 2px solid #FADBC8;
height: 200px;
padding: 10px;
}
.block-1 img {
height: 140px;
float: right;
clear: both;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.snapshot a {
float: right;
text-decoration:underline;
font-family: "Raleway";
}
DO this in snapshot class
<div class="snapshot">
<div class="wrap" ><img src="portfolioresources/scenelogo.png"></div>
View Project
</div></div>
and add this to ur css file to sortify your error
.wrap{
padding:2px;
}
While doing these kinda things on your own is definitely useful, so you can learn the ropes and inner workings first, be sure to use a css framework in the future (like bootstrap) so you can knock these out quickly.
<div class="view-project">
<img ... />
<span>View Project</span>
</div>
In your css:
.view-project{ float: right; width:300px; padding:40px; }
.view-project img,.view-project span{ display:block; }
A suggestion: if you want your image at the right of the div with view project beneath, I think you should contain them in another div. Like this:
<div class="snapshot">
<div>
<img src="portfolioresources/scenelogo.png">
View Project
</div>
</div>
Then float that div right and remove all other floats.
If you want the image on top of view project, set display: block; to your 'a' elements.
You need to at least define a width for snapshot. by making the width of snapshot equal the width of the image, this will leave no room for the link and will force it to drop below the image. Remove any floating on the image and link, and rather float snapshot to the right