I want the text to not be larger than the image, here is an example of the problem
http://i.imgur.com/DwIMS3Q.png
And how I would like it to be
http://i.imgur.com/VOA1W60.png
As you can see, when the picture is too tight, there is white borders, due to the text. I would like the text to not be larger than the picture.
Here is the HTML code :
<div class="row">
<div class="col-md-6" style="float:none;margin:0 auto;">
<div class="polaroid center-block">
<img src="./images/650x650.png" alt="Norway" class="img-responsive center-block" style="width:auto;height:auto">
<div class="my_container" style="width:auto;height:auto">
<p>The Troll's in Hardanger, Norway</p>
</div>
</div>
</div>
</div>
And here is the CSS :
body {
margin: 25px;
}
div.polaroid {
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.my_container {
text-align: center;
padding: 10px 20px;
}
Thanks in advance.
Set the width of the image to 100%.
.polaroid img{
width: 100%;
}
And the polaroid as well:
.polaroid {
width: 100%;
}
Related
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
I want to place the picture neatly in the middle and to the left of the of the box and the font in the middle of it. However, when I mess around with the margins and padding, it doesn't work out the way I want it to.
Here is my CSS and HTML for it.
CSS
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
margin: auto;
}
.make-center {
text-align: center;
}
.media-content {
font-size: 100px;
}
.card {
margin-bottom: 15px;
margin: 150px auto auto auto;
width: 2000px;
border-color: #1abc9c;
}
.card-content {
width: 3000px;
height: 200px;
}
.wrapper {
/* border-bottom: 10px solid #1abc9c; */
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
border-radius: 100px;
margin: 200px auto;
background: white;
width: 50%;
height: 150px;
padding: 40px 20px;
}
.celeb-name {
padding: 5px 10px 10px 5px;
}
The .celeb-name does not place the celebrity's name in the middle when I include the picture and the picture becomes deformed when I use the 'padding' feature in CSS.
HTML
<div class="star-list" id="star-box">
<div class="star-list" id="star-box">
<div class="card" data-name="${name}\">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://api.buzzanglemusic.com/images/artists/1374"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p>1. DRAKE</p>
</div>
</div>
</div>
</div>
</div>
</div>
I would utilize CSS Flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid green;
border-radius: 500px;
width: 200px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 6px 1px rgba(109, 103, 104, 0.88);
}
.celeb-img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-left: 5px;
}
.celeb-name {
margin-left: auto;
margin-right: auto;
font-size: 1rem;
text-transform: uppercase;
}
<div class="container">
<img class="celeb-img" src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<p class="celeb-name">1. Drake</p>
</div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin-top: 25%;
box-size: border-box;
}
.star-list {
display: flex;
align-items: center;
padding: 5px;
width: 200px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0px 10px 20px -6px #1abc9c;
background-color: #fff;
border-radius: 100px;
height: 40px;
}
.star-list > img {
height: 40px;
border-radius: 50%;
}
.star-list > .media-content {
width: 100%;
display: flex;
justify-content: center;
font-weight: 600;
font-size: 20px;
}
<div class="star-list" id="star-box">
<img src="https://api.buzzanglemusic.com/images/artists/1374" alt="Placeholder image" />
<span class="media-content">
1. DRAKE
</span>
</div>
use flex-box to align the items center
code :
display : flex;
align-items : center;
And you don't have to use that much of divs, try to make it cleaner
Above is the improved code, if you want
You can achieve this using CSS flexbox, try making div media as flexbox and then aligning its inner content as you want like,
.media{
display:flex;
align-items:center; /* will make the inner divs align vertically centered */
}
.media-left{
width:40%; /* or as required */
}
.media-content{
width:60%; /* or as required */
font-size: 100px;
}
You can get the desired output by using CSS Flexbox.
In your case, add flex to the container(media) which is wrapping both image and name.
.media{
display:flex;
justify-content:space-between;
align-items:center;
}
If you're willing to use Bootstrap, then you could utilize some of the many powerful classes within the framework.
For instance, you could make use of the flexbox classes and the grid system, as well as the responsive image classes.
HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
CSS:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
Codepen Example here.
Snippet:
.wrap-rounded {
width: 100%;
height: 115px;
border: 2px solid #7FFFD4;
border-radius: 40px;
-webkit-box-shadow: 12px 10px 10px 0px rgba(127, 255, 212, 1);
-moz-box-shadow: 12px 20px 01px 0px rgba(127, 255, 212, 1);
box-shadow: 12px 10px 20px 0px rgba(127, 255, 212, 1);
}
.card-text {
padding-right: 10%;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap-rounded d-flex">
<div class="d-flex flex-row align-self-center justify-content-start">
<div class="col-6 d-flex align-self-center">
<img src="https://api.buzzanglemusic.com/images/artists/1374" class="img-responsive rounded-circle col-7 col-md-4 col-sm-5 col-xs-12" alt="placeholder image" />
</div>
<div class="col-md-12 d-flex justify-content-end align-self-center text-right card-text">
1. Drake
</div>
</div>
</div>
As the title suggest i want to make cards go from left to right instead of vertically i really dont know what to do and I have tried everything including float left
The code below is of one card. they are all the same with different text
and here is a screenshot of what it looks like
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
.card {
display: inline;
}
.card {
float: inline-start;
}
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</section>
</div>
</div>
</div>
Flex makes it very easy to do. Wrap it in a container and set the flex-direction to row.
.cards {
display: flex;
flex-direction: row;
}
.card {
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box;
margin: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
<div class="cards">
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
</div>
wrap your cards in a div and set the div to
here is an example:
.wrap {
display: flex;
justify-content: space-between;`
}
<div class="wrap">
<div class="card">
card content
</div>
<div class="card">
card content
</div>
<div class="card">
card content
</div>
</div>
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get the container div to stretch to the full height of the parent. As you can see the parent (body) has the info color and the container has the primary color. The color of the container should stretch over the color of the parent, but its not. I just used colors to help identify what section of my html was not stretching to the full height of the page. Below is the source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
and the css file
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 25%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 50%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
appreciate the help!
The reason is that your html and body tag are not strechted to be full height. You should style them like this:
html, body {
height: 100vh;
}
Here is a working codepen
You can't use min-height as it won't work with .container-fluid {height:100%}.
Note: Don't use background color for finding html elements! Instead use inspect element and hover your mouse over html elements.
Elements with 100% height only expand to the height of their parent elements. Add 100% height to the html and body tags:
html,body{
height: 100%;
}
While you're at it, get rid of the height from .info-stats and .info-logs:
html,body{
height: 100%;
}
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Try this... set height: 100%; for .info-stats and .info-logs
.body {
background: #eeeeee;
}
.info-stats {
background: #ffffff;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
height: 100%;
width: 100%;
margin-top: .5%;
}
.info-logs {
background: #ffffff;
height: 100%;
width: 100%;
box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
margin-top: 1%;
}
.container-fluid {
height: 100%;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body class="body bg-info">
<div class="container-fluid bg-primary">
<div class="row">
<div class="col-md-4">
<div class="info-stats">
Image Id:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Status:
</div>
</div>
<div class="col-md-4">
<div class="info-stats">
Endpoint:
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="info-logs">
Logs:
</div>
</div>
</div>
</div>
</body>
</html>
Need to center image inside anchor tag. Tried margin: 0 auto;. But not worked.
Here is the fiddle.
I am using bootstrap and a custom css.
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
Achieved with this.
a.navbar-brand {
text-align: center;
display: inline-table;
position: relative;
}
and if neccessary only remove the padding <div class="container-fluid" style="padding-bottom: 30px"> or make it padding-bottom:0;
Fiddle
thanks
Make the tag display:block; width:100%, and then set the image with margin:0 auto:
.navbar-brand {
display:block;
width:100%;
}
.navbar-brand img {
margin:0 auto;
}
FIDDLE
Remove the bootstrap class "navbar-brand"
and replace with the following class
https://jsfiddle.net/y0yL3gna/3/
.class-name{
text-align: center;
display: block;
}
And html will be
<div class="wrapper">
<div class="container">
<nav class="navbar bgcol col_org">
<div class="container-fluid" style="padding-bottom: 30px">
<div class="navbar-header">
<a class="class-name" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" alt="flower"></a>
</div>
</div>
</nav>
</div>
</div>
Remove float and set display:block for anchor tag and margin: 0 auto will work for img tag.
.navbar-brand {
display:block;
}
.navbar-brand img {
margin: 0 auto;
}
I just modified some html, with your style. Try this!
.wrapper {
background: #ccc;
padding-bottom: 10px;
}
.container {
background-color: #FFF;
box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.2);
}
.bgcol {
/*background-color: #1d3179;*/
background-color: #000000;
border: #fff;
color: fff
}
.bgcol .navbar-toggle .icon-bar {
background-color: #FFF;
}
.bgcol a {
color: #FFF;
}
.col_org {
background: #1d3179;
}
.col_org:hover {
background: #1d3179;
}
<div class="wrapper">
<div class="container">
<nav class="navbar bgcol col_org">
<div class="container-fluid" style="padding-bottom: 30px">
<div class="navbar-header">
<a class="" style=" width: 100%; display: block;" href="#" target="_self"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/android-128.png" style="margin: auto; display: block;" alt="flower"></a>
</div>
</div>
</nav>
</div>
</div>