i'm doing some front-end stuffs and i got interrupt by an error
I want to get two cards in a section and i want them aligned horizontally. The problem is that in desktop version it works as well, but when i watch the mobile version it looks weird.
https://prnt.sc/XBbBVW2suZmE
the card goes off the section (the yellow space), the text goes outside the card and it isn't horizontally aligned.
<section class="blogdiv">
<div class="cards">
<div class="card" style="width: 18rem;">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title">Vespa</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
leggi di più
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title">Vespa</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
leggi di più
</div>
</div>
</div>
</section>
i'm using sass so, here's the scss of the blogdiv
&.blogdiv{
display: flex;
justify-content: center;
align-items: center;
background-color: $color2;
color: $color1;
.cards{
.card{
#include selection($color2, $color1);
display: inline-block;
margin: 0.5rem;
max-width: 60vw;
max-height: 45vh;
border: 1px solid $color1;
color: $color1;
.card-img-top{
max-width: 60vw;
max-height: 60vh;
}
.card-body{
padding: 1rem;
.card-title{
font-size: 3vh;
font-weight: 600;
margin: 0;
}
a{
#each $prefix in $prefixes {
#{$prefix}user-select: none;
}
cursor: default;
color: $navcolor2;
text-decoration: none;
&:hover{
color: black;
}
}
}
}
}
}
first you need to add a mobile reponsive section, using #media screen
#media screen and (max-width: 960px){
.card{
display: block;
margin: 0 auto; /*align horizontal auto*/
}
}
and than, is just use the width --- heigth px to make proportional....
Related
I am trying to recreate this card using CSS.
However I can't figure out how to create the HTML and CSS. When I create a div and give it a background cololour and relative position, the Image is getting pushed out.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 250px;
height: 350px;
background-color: white;
}
.CardHeader {
width: 100%;
display: flex;
flex-direction: column;
}
.CardHeader div {
width: 150px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
left: -15px;
}
.CardHeader img {
width: 100px;
height: 100px;
background-color: red;
}
<div class="Card">
<div class="CardHeader">
<div></div>
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
Few things to learn:
Place the image inside the div element
Use position:absolute on the image to allow you to move the image layer
Use overflow:hidden; on the div to 'cut off' the the image so it doesn't appear outside the container.
You also don't need the extra div element inside the card header - just use the card header as the parent.
.Card {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 350px;
background-color: lightgray;
border-radius:10px;
}
.CardHeader {
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
background-color: #ff9301;
display: inline;
position: relative;
overflow: hidden;
border-radius: 10px 10px 0 0;
}
.CardHeader img {
width: 150px;
height: 150px;
background-color: red;
position: absolute;
top: -20%;
left: -10%;
border-radius: 50%;
}
<div class="Card">
<div class="CardHeader">
<Image src="/imgs/desktop-solid.svg" width={100} height={100} alt="Image" />
</div>
<div class="CardBody">
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</div>
As far as I know, width of a flex item adjusts to its content(when flex-direction: row;).
Here you see, the width of second .item is too long even though I set the width of h1 to 50%.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
But when I use px instead of %, the result that I wanted comes out. (Please view it in a full page)
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 400px;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
I can't understand how % is calculated in the first code. Can somebody help? Thanks
You have to apply the width on the .item element.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.item:nth-child(2) {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, quo.
</h1>
</div>
</div>
You are not applying 50% to children (.item) but rather to (.test), which is not child of display:flex. Fix it and you'll get result!
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
width: 50%;
}
.test {
background: yellow;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,quo. </h1>
</div>
</div>
Today I've faced with specific design: there is row of cards and text inside card is aligned with another text from other cards. So title is aligned with title from other cards, text is aligned with other texts. It is very difficult for me to explain it clearly so I make a screenshot of the thing I'm trying to reach
By now I'm ready to completely ignore this issue due to impossibility of realization by pure css, but who knows, may be there is some solution?
UPDATE: I'm sorry for lack of explanation. Here is the code. My aim is to make the same alignment as in screeenshot above without using <br>s and fixed heights.
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
Thanks in advance.
What you are trying to do can be easily achieved using CSS grids and a bit of HTML restructuring.
The other way to do this would be to give fixed heights to your text elements.
If you are not familiar with CSS grids and don't like the idea of giving fixed heights to your elements, you can achieve similar result by using a little bit of JavaScript. Check the attached snippet.
I have written a small function equalizeClass() to equalize heights of all the elements belonging to a particular class. What it does is basically scans through all the elements belonging to a particular class and finds the element with maximum height. It then sets the heights of all the elements equal to the calculated maximum height.
Don't forget to call equalize() every time you update your related DOM elements.
I have not changed anything in your HTML structure.
In CSS, I have just added justify-content to your item class.
justify-content: space-between;
function equalizeClass(className) {
var images = document.getElementsByClassName(className);
var max_height = 0;
for (var i = 0; i < images.length; i++) {
if (images[i].clientHeight > max_height) {
max_height = images[i].clientHeight;
}
}
for (var i = 0; i < images.length; i++) {
images[i].style.height = max_height + 'px';
}
}
function equalize() {
equalizeClass("title");
equalizeClass("text");
}
window.addEventListener("orientationchange", equalize());
window.addEventListener('resize', equalize());
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</8>
</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
You need to make your title div a fixed height, ideally a height that is taller than the title text itself. See the code below for your title div:
.title {
text-transform: uppercase;
font-weight: bold;
height: 100px;
max-width: 100%;
}
Then give your text div this style:
.text{
display: flex;
justify-content: center;
align-items: top;
}
See this pen.
I have content blocks that each contain a title, an image, and copy. I need to vertically align the blocks so that the images line up any time they are in the same row.
The code below illustrates a width at which my layout breaks. I can't make the title or copy a fixed height without breaking the spacing between rows. I can't put the titles or copy in their own row because the title image and copy have to stay together as the blocks flow to new rows.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: 0 auto;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
I think align-items: center and justify-content: center will help you.
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.container {
font-family: 'lato', sans-serif;
max-width: 600px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.block {
flex-basis: 190px;
flex-grow: 1;
}
h3 {
font-size: 20px;
letter-spacing: .5px;
text-align: center;
width: 90%;
margin: 0 auto .5em auto;
}
img {
display: block;
width: 90%;
max-width: 225px;
margin: 0 auto;
}
p {
font-size: 16px;
letter-spacing: .5px;
text-align: center;
width: 85%;
/* height: 4.75em; */
margin: .25em auto 0 auto;
<div class="container">
<div class="block">
<h3>The Title One</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing eli.</p>
</div>
<div class="block">
<h3>The Title Two</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
<div class="block">
<h3>The Longer Title Three</h3>
<img src="http://via.placeholder.com/225">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
CSS alone can’t align the images vertically, because the individual blocks aren’t related – one title doesn’t know how tall another is. The answer above is a reasonable stab at the problem, but not very robust, as you noticed.
You could come closer if you can use CSS Grid, but then you’d lose the wrapping behaviour of the flex row.
I can’t think of anything but a JavaScript solution: figuring out which blocks are on the same row, measuring which title is the tallest, and assigning that height to the others.
Another approach could be to change the design, e.g. by moving the titles to below the images. After all, aligning these images while having titles of arbitrary lengths above them seems like a strange combination of constraints.
Currently, I am using units: "vw" to make my textbox responsive.
First fiddle (Non-responsive): https://jsfiddle.net/jzhang172/w7yhd6xx/2/
#second{
height:635px;
background:gray;
}
#second-try{
height:635px;
}
.about-us-info {
margin: 0 auto;
width: 900px;
height: 313px;
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -450px;
top: 50%;
margin-top: -160px;
}
span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Second fiddle (Attempt at responsiveness using "vw"):https://jsfiddle.net/jzhang172/9Lagw1y6/1/
.section{
position:relative;
}
#second{
min-height:635px;
}
.about-us-info {
margin: 0 auto;
width: 46.9vw;
/* height: 16.3vw; */
border: 2px solid #3c3c3c;
position: absolute;
left: 50%;
margin-left: -23.4vw;
top: 50%;
margin-top: -160px;
}span.span-header {
text-align: center;
display: block;
/* margin-top: -22px; */
position: relative;
font-size: 34px;
background: white;
width: 420px;
width: 21.875vw;
margin: 0 auto;
margin-top: -21px;
/* border: 1px solid black; */
text-transform: uppercase;
font-family: latobold;
letter-spacing: .16em;
}
.about-us-info p {
text-align: center;
/* line-height: 28px; */
line-height: 1.65em;
}
.about-us-info p.first {
margin-top:50px;
}
/*----Third section--------*/
#third{
min-height:488px;
background:gray;
}
#services-info{
margin-top:-125px;
border:2px solid white;
border-top:0px;
}
#services-header{
background:transparent;
color:white;
}
#services-paragraph{
color:white;
}
#services-header:before, #services-header:after {
content: "";
position: absolute;
height: 5px;
border-top: 2px solid white;
top: 19px;
width: 11.8vw;
}
#services-header:before {
right: 100%;
margin-right: .85vw;
}
#services-header:after {
left: 100%;
margin-left: .85vw;
}
<div class="section" id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur. <br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="section" id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur<br>
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
Here are some errors that I'd like to be corrected but not sure how to:
1.) Is VW being used properly here? Is there a better solution?
2.) I'd like the height of each section to expand based on the content within while maintaining a min-height of each section (635px for the first and 488 for the second) because right now when re-sizing the browser smaller, the content overlaps anything underneath it.
Is there any problem using this solution? Is there a better solution?
Is this it? If not, let me know.
body {margin: 0;}
.sections {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.sections section {
-webkit-box-flex: 1;
-webkit-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.sections section>div {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
padding: 35px 50px;
border:1px solid #333;
margin: 50px 0;
max-width: 50%;
box-sizing: border-box;
position: relative;
min-width: 50%;
-webkit-transition: min-width .3s ease-out;
transition: min-width .3s ease-out;
}
#second {
background-color: white;
color: #333;
}
#third >div {
border-color: white;
}
#third {
background-color: gray;
color: white;
}
.span-header {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
background-color: white;
padding: 0 1rem;
font-size: 1.8em;
text-transform: uppercase;
text-align: center;
-webkit-transition: font-size .3s ease-out;
transition: font-size .3s ease-out;
white-space: nowrap;
}
#third .span-header {
background-color: gray;
}
#media (max-width: 767px) {
.sections section>div{
min-width: 60%;
}
.sections section>div {
padding: 15px 30px;
}
.span-header {
font-size: 1.25em;
}
}
#media (max-width: 359px) {
.sections section>div{
min-width: calc(100vw - 120px);
}
.span-header {
white-space: initial;
}
}
<div class="sections">
<section id="second">
<div class="about-us-info">
<span class="span-header">About Us</span>
<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a turpis non est commodo mollis.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
<section id="third">
<div class="about-us-info" id="services-info">
<span class="span-header" id="services-header">Services</span>
<p class="first" id="services-paragraph">
Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur
<br> Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</section>
</div>
Please note I've also made a few adjustments to the html markup. Cheers!
jsFiddle
Question 1
It is perfectly fine to use vw this way. Percentage widths can generally do the same things as vw, but since you have some nesting, you would have to mess with the parent's widths to make percentages work. (This use case was noted by Chris Coyier.)
The nesting I'm talking about is <div class="section">s. Since the margins on the <body element have not been reset, these sections (on some browsers) end up a little narrower than the viewport. To use percentages, you would have to do this:
/* Reset margins */
body, html {
margin: 0;
padding: 0;
}
/* Now use percentages */
.about-us-info {
width: 46.9%;
}
span.span-header {
width: 47.4%;
}
Note vw has more issues with browser support (look at the known issues tab).
Question 2
In the code given, the text boxes are using position: absolute as part of the centering. Absolute positioning takes elements out of the document flow, and that is the reason the sections are not expanding to fit the content. If you want them to expand properly, you will need to use a different centering technique.
CSS table centering (as shown in the link above) would work:
<!-- First wrap your text boxes with containers... -->
<div class="section" id="second">
<div class="container">
<div class="about-us-info">
<!-- ... -->
</div>
</div>
</div>
Then remove the current absolute-based centering on the text boxes and add the following:
/* Make the parent a table: */
.section {
display: table;
width: 100%;
}
/* Make the container a table cell and center it: */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}