I'm having trouble with flexbox. I'm trying to present book cards with a fixed footer (which will contain edit / remove buttons). but the footer of each card keeps running away, and results not in the same height. I searched in google and sof and found that:
.product-modify {
margin-top: auto;
margin-bottom: auto;
}
but it does not seem to work.
I would appreciate any tips.
I USE REACT BTW. DONT LAUGH AT ME. THIS IS A CODE SNIPPET WHICH DOES NOT RUN because I could not figure out how to add react es6 to here.
Thank You for any help (:
this is my css:
<div>
<h1 className="searchResultsHeadline">Search Results:</h1>
<section className="products">
{books.map((book, index) => (
<div key={book.id} className="product-card">
<BookCard />
</div>
))}
</section>
</div>
/* Book List */
.searchResultsHeadline {
font-family: "Montserrat", sans-serif;
}
.products {
display: flex;
flex-wrap: wrap;
}
.product-card {
flex: 1 17%;
margin: 30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 40%;
min-height: 100%;
padding: 5px;
}
.product-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.product-card:after {
content: "";
flex: auto;
}
.product-image img {
max-width: 100%;
border-radius: 5%;
}
.product-modify {
margin-top: auto;
margin-bottom: auto;
}
.empty-space {
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 130px;
height: 180px;
margin: 0 1% 24px;
}
#media (max-width: 600px) {
.product-card {
flex: 1 46%;
}
}
#media (max-width: 480px) {
.product-filter {
flex-direction: column;
}
}
Did you try a simple position:relative / position:absolute relationship like this
.product-card {
...
position:relative;
}
.product-modify {
position:absolute;
bottom:0;
}
First of all. Thank you very much for your answers.
I found out this piece of code that fixed my footer and makes it sticky footer which allways stick to the bottom:
.card-inner {
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
credit for the source:
flexbox sticky footer
Related
I've been trying to change the order of divs after the screen size changes. Initially, Main Heading should be on the first row on the left and Main description on the first row right, with the menu div on the second row. When the screen is resized, I want all these elements re-ordered in a single column in the order- 1. Main heading 2. menu div 3. main description.
I tried using the order function as pointed out by other answers. But for some reason, it still doesn't change the order of divs.
#main-page {
position: relative;
margin-left: 25vw;
;
}
#main-heading {
margin-left: 0px;
padding: 70px 20px 0px 0px;
font-size: 48px;
font-family: DM Serif Display;
width: 35vw;
height: 33vh;
float: left;
overflow: hidden;
}
#main-description {
overflow: hidden;
padding: 100px 10vw 0 80px;
height: 33vh;
width: 180px;
color: gray;
}
#st-line {
border: none;
width: 50px;
margin-left: 0px;
height: 2px;
background-color: #F34650;
}
#main-menu {
background-color: white;
height: 50vh;
display: flex;
flex-direction: row;
justify-content: space-between;
}
div>.menu-items {
height: 25vh;
padding: 25px 25px 5px 25px;
border-radius: 20px;
box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
}
#media (max-width:1040px) {
#main-page {
position: fixed;
margin-left: 5vw;
display: flex;
flex-flow: column;
z-index: 1;
}
#main-heading {
margin-left: 0px;
margin-right: 0px;
height: 25vh;
padding: 80px 30px 0px 0px;
width: 90vw;
overflow: hidden;
order: 1;
font-size: 44px;
}
#main-menu {
display: flex;
flex-direction: row;
order: 2;
}
#main-description {
overflow: hidden;
padding: 20px 0px 20px 20px;
height: 100%;
width: 180px;
order: 3;
}
#st-line {
border: none;
width: 50px;
margin-left: 0px;
height: 2px;
background-color: #F34650;
order: 4;
}
div>.menu-items {
height: 25vh;
padding: 25px 25px 5px 25px;
border-radius: 20px;
box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
}
}
<div id="main-page">
<div id="main-heading">Main Heading</div>
<div id="main-description">Description
<hr id="st-line">
</div>
<div id="main-menu">
<div id="menu-div1" class="menu-items">item1</div>
<div id="menu-div2" class="menu-items">item2</div>
<div id="menu-div3" class="menu-items">item3</div>
<div id="menu-div4" class="menu-items">item4</div>
<div id="menu-div5" class="menu-items">item5</div>
</div>
</div>
Add this line in your CSS and add the code and style you want in your website when the width get to 1040px and you can do this same for other size screen too
#media only screen and (max-width:1040px){
}
This seem to work properly, or maybe I did not get what you are trying to achieve.
Check this codepen and tell us if this is the desired behaviour.
I just modified your media query like so:
#media only screen and (max-width:1040px)
Screen > 1040 px :
Screen < 1040px
Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.
#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.
I'm using this grid as a top navabar and I want to make a few alterations:
How can I reduce the width of the input to 40% but still keep it right next to the logo? And how can I add a sign-in div at the right hand corner. But keep in mind that I want the entire header to remain responsive like it is now. If I do the following it looks good in a full screen but when the width of the screen is smaller the input becomes really small.
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 40%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div
</div>
</div>
You can either reduce the value of 40% in your CSS.
Or add new CSS for max-width:
.header > form > input {
max-width: 50px;
}
For your sign-in div, you can add this CSS:
.float-right {
float:right;
}
However your current class spells floar and not float, you should change that.
you can use this code
body {
margin: 0;
padding: 0;
}
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 24%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div>
</div>
</div>
I am trying to edit my React chat room app so that the main App div is 80% width of the page, and everything inside is set to either 25% width or 75% width. I am tryin to set my left (room list) column to 25% width of the App div and (basically everything else) the top section, message section, and new message form to 75% width of the App div.
My issue is that I'm setting the room list column and my position fixed elements (top user section and bottom message input section) are taking 100% or 75% of the entire screen. How do I get them to only take 75% of the app (parent/container) AND stay fixed to the top/bottom??
screenshot
App (parent/container) CSS:
.App {
text-align: center;
height: 500px;
width: 80%;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
top current room display:
.currentRoomDisplay {
z-index: 15;
height: 60px;
overflow: hidden;
margin-left: 25%;
width: 75%;
background-color: #e0ebfc;
display: flex;
justify-content: space-between;
align-items: center;
margin-top:0px;
position: relative;
font-family: 'Roboto', sans-serif;
}
messageBar on bottom:
.messageBar {
position: fixed;
margin-top: 388px;
text-align: center;
padding-bottom: 13px;
width: inherit;
background-color: #e0ebfc;
margin-bottom: 0;
height: 40px;
overflow: scroll;
}
I've been trying stuff for hours! please help! :D
**If you need me to copy/paste everything, I will
*******UPDATE**********
got it figured out, thanks for the help!
I fixed it at 3am so I cant remember exactly what I did but I'll save this for future reference. Thanks for the help guys.
Have you ever heard about CSS flexbox layout?
CSS:
.App {
... (other styles)
display: flex;
flex-direction: row;
width: 80%;
margin: 0 auto;
}
.listRoom {
... (other styles)
flex-direction: column;
flex-basis: 25%;
}
.currentRoomBox {
display: flex;
flex-direction: column;
flex-basis: 75%;
}
.currentRoomDisplay {
... (other styles)
display: flex;
flex-direction: row;
flex-basis: 100%;
}
.messageBar {
... (other styles)
display: flex;
flex-direction: row;
flex-basis: 100%;
}
HTML:
<div className="App>
<div className="listRoom">
...
</div>
<div className="currentRoomBox">
<div className="currentRoomDisplay">
</div>
<div className="messageBar">
</div>
</div>
</div>
Can you add this CSS:
* {
box-sizing: border-box
}
I have header tag, which has full width/height image on the background.
I need to algin elements in the center of that page exactly as picture shows.
First goes image, than text, than buttons one after another one and on the very bottom of the page is slider
apart from slider, I've managed to put all content to the center with code below
Also, I'm using boostrap and jquery if needed
It's one page design, this is just a header
Thank you for any help :)
<header>
<img src="" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
</div>
</header>
SCSS
header {
margin-top: -56px !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
img {
margin-top: 5%;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
}
.btn {
#include Myriad-Pro-Light;
}
.btn-green {
margin-top: 5%;
color: #fff;
}
.btn-grey {
color: #000;
}
.swiper-container {
margin-top: 5%;
width: 100%;
height: 300px;
}
}
You can achieve this by using the following properties at the appropriate places.
text-align:center;
display:flex;
align-center;
margin:0 auto;
Also as your using bootstrap so some of the classes may get overwritten so make sure to use !important on properties that you want to force your setting on.
Using your code i have made some changes using the above mentioned suggestions and here is the code:
<header>
<img src="http://placehold.it/350x150" alt="full">
<h1>The</h1>
Login
Browse
<div class="swiper-container">
<p>Large full width div, which must stay on the bottom of the header tag</p>
</div>
</header>
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../img_cover_m.jpg);
background-size: cover;
background-position: center;
height: 100vh;
min-width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
img {
margin: 0 auto;
display: block;
max-width: 50%;
height: auto;
}
h1 {
color: #fff;
text-align:center;
}
.btn {
#include Myriad-Pro-Light !important;
margin: 10px auto !important;
display: block !important;
width: 25vw !important;
text-align:center !important;
padding: 6px 0px !important;
}
.btn-green {
color: #fff;
display:block;
}
.btn-grey {
color: #000;
display:block;
}
.swiper-container {
background-color:red;
width: 100%;
height: 300px;
position:absolute;
bottom:0;
display: flex;
align-items: center;
justify-content: center
}
.swiper-container p{
#include Myriad-Pro-Light !important;
margin:0 auto;
color:white;
font-size: 18px;
}
Here is a sample using this code. http://codepen.io/Nasir_T/pen/PboZme