I want to build a simple webpage with two pages of full height.
These two pages have one centered block and a small text (with icon) at the bottom.
Here is an example: https://jsfiddle.net/f93wm58r/
<div id="how-to" class="section how-to">
<div id="title" class="title">title</div>
<div id="code" class=" code">title</div>
<div id="view-more" class="view-more">
<span>View intructions</span>
<br/> <!-- other option ? -->
<i class="fa fa-arrow-down view-more--arrow"></i>
</div>
</div>
<div id="instructions" class="section instructions">
<div id="intructions" class="instructions">instructions</div>
<div id="view-more" class="view-more">
<span>Go back</span><br/>
<i class="fa fa-arrow-up view-more--arrow"></i>
</div>
</div>
body {
font-family: "Source Sans Pro","Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.3rem;
background-color: #FFF;
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-flow: column wrap;
align-content: space-between;
}
.title {
margin-top: auto;
font-weight: bold;
font-size: 4rem;
}
.view-more {
color: #D1D1D1;
text-align: center;
cursor: pointer;
margin-top: auto;
margin-bottom: 10px;
}
.view-instructions {
margin-top: auto;
}
.view-more--arrow {
font-size: 2rem;
}
As you can see on the second page the text is not centered.
What am I missing?
Extra issue
it's not responsive: try reducing the page and the content will be displayed in two columns
You haven't gave the second page title a margin-top of auto, like you did with .title.
.instructions {
margin-top: auto;
}
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
.location-text {
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact {
display: flex;
}
.icon-address {
width: 22px;
height: 22px;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="list-contact">
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>
I have a frame like the following and I want to display flex so that they are on one row:
And I wanted the icon and content to be on the same line so I used display flex and it affected the width of the right icon. Here is my HTML and CSS code:
And this is the result I got:
So is there a way to make the element containing my icon unaffected? Hope to get a solution from you
By default, every flex child has flex-shrink: 1 assigned, which cause them to shrink to its minimum content width when there are no enough space.
To counter that, you just need to manually assign it to 0 so it will keep its assigned size which is 22px.
See more about flex-shrink.
.icon-address {
flex-shrink: 0;
}
.location-text {
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact {
display: flex;
}
.icon-address {
width: 22px;
height: 22px;
flex-shrink: 0;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="list-contact">
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>
you just need to put the elements correctly, so that the layout is as expected
.location-text{
font-family: 'Inter';
display: inline-block;
word-break: break-word;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 26px;
align-items: center;
color: #13233A;
}
.list-contact{
display: flex;
}
.icon-address{
width: 22px;
height: 22px;
background: #EAA9A9;
border-radius: 8px;
align-items: center;
display: flex;
justify-content: center;
}
.content-address{
width: 200px
}
<div class="col-md-3 col-sm-6 col-xs-12 bootCols">
<div class="title location">
<i class="bx bx-location-plus localst"></i>
<span class="location-text">Trụ sở (TP. Vinh)</span>
</div>
<div class="icon-address">
<img src="./image/home/address.png" alt="">
</div>
<div class="list-contact">
<div class="content-address">
<span>Do Something Do Something Do Something Do Something Do Something Do Something Do Something</span>
</div>
</div>
</div>
Looking to align this image on the right with the other text that I have. When I run the code, it pushes the margin down and places the image below the text to the right. Preferably I'd like the image evenly with the top text. Any recommendations to help as well as suggestions for cleaning up code are appreciated.
<div class="main">
<h1 class="awesome" <strong>Welcome!</strong></h1>
<div class="text"<small><p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p> </small> </div>
<div class="button1"
<button> Sign Up </button>
</div>
<div class="Image">
<img src="Images/download.jpg"
alt="Rocket"
</div>
</div>
</div>
.main{
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
align-self: flex-start;
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
.Image{
align-self: flex-end;
}
You can put the text block (heading, text, button) in a container and use flexbox to position it next to the image like the example below. This way you can ommit most of the flex alignment css you had previously.
If you wanted something else, please add a picture of what you are trying to achieve.
.main{
display: flex;
background-color: #1F2937;
font-family: 'Roboto';
margin-bottom: 25px;
padding-left: 25px;
gap: 10px;
}
.awesome{
font-size: 48px;
font-weight: bolder;
color: #f9faf8;
}
.text{
color: #f9faf8;
}
.button1{
font-family: 'Roboto';
border: black;
border-radius: 8px;
padding: 10px;
width: fit-content;
height: fit-content;
background: #3882f6;
}
<div class="main">
<div>
<h1 class="awesome"><strong>Welcome!</strong></h1>
<div class="text">
<small>
<p>This website has some subtext that goes here under the main title.</p>
<p>Its a smaller font and the color is lower.</p>
</small>
<button class="button1"> Sign Up </button>
</div>
</div>
<img src="https://picsum.photos/id/237/300/300" alt="Rocket"/>
</div>
I'm trying to layout a footer for my site using Flexbox. There are two columns, each with the same number of items, except for one column is being populated by text in <h4> tags and other links in <a> tags. They are spaced differently on the vertical axis and I can't work out why. I have added some background colours for clarity.
What am I missing?
.footer {
font-family: 'nexa_light', sans-serif;
font-style: normal;
background-color: #003152;
color: white;
}
.footer-container {
background-color: red;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-left: 30px;
}
.foot-section {
background-color: blue;
margin-bottom: 15px;
}
.foot-content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-end;
}
.foot-section a {
/*links*/
color: white;
}
.footer-container>h5 {
/*Copyright*/
margin-left: auto;
margin-right: auto;
margin-top: auto;
font-size: 15px;
}
#media (min-width: 992px) {
.foot-section h2 {
font-size: 20px;
}
.foot-section a,
.foot-section h4 {
font-size: 15px;
}
}
<div class="container-fluid footer">
<div class="footer-container row">
<div class="col-sm-3 foot-section">
<div class="foot-content">
<h2><strong>Company</strong></h2>
<h4>London, UK</h4>
<h4>Logo by X</h4>
<h4>Something else</h4>
</div>
</div>
<div class="col-sm-3 foot-section">
<div class="foot-content">
<h2><strong>Quick Links</strong></h2>
Home
Products
News & Reviews
</div>
</div>
<div class="col-sm-6 foot-section">
<div class="foot-content">
<h2><strong>Contact</strong></h2>
</div>
</div>
<h5>Copyright © X Ltd 2020, All Rights Reserved. |</h5> Privacy Policy
</div>
</div>
Heading elements (such as an h4) tend to have top and bottom margins set in browser default style sheets.
These margins aren't applied to anchor elements (a).
Here are the styles applied to h4 elements in Chrome:
You can see that the top and bottom margins are 1.33em.
"block-start" is the top in horizontal writing mode.
"inline-start" is the side where text begins. It's the left side in LTR.
"-end" refers to the opposite side.
source: § 6.2. Flow-relative Directions
You just need to override the defaults. Add this to your code: h4 { margin: 0; }.
/* NEW */
.foot-section h4 {
margin: 0;
}
.footer {
font-family: 'nexa_light', sans-serif;
font-style: normal;
background-color: #003152;
color: white;
}
.footer-container {
background-color: red;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-left: 30px;
}
.foot-section {
background-color: blue;
margin-bottom: 15px;
}
.foot-content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-end;
}
.foot-section a {
/*links*/
color: white;
}
.footer-container>h5 {
/*Copyright*/
margin-left: auto;
margin-right: auto;
margin-top: auto;
font-size: 15px;
}
#media (min-width: 992px) {
.foot-section h2 {
font-size: 20px;
}
.foot-section a,
.foot-section h4 {
font-size: 15px;
}
<div class="container-fluid footer">
<div class="footer-container row">
<div class="col-sm-3 foot-section">
<div class="foot-content">
<h2><strong>Company</strong></h2>
<h4>London, UK</h4>
<h4>Logo by X</h4>
<h4>Something else</h4>
</div>
</div>
<div class="col-sm-3 foot-section">
<div class="foot-content">
<h2><strong>Quick Links</strong></h2>
Home
Products
News & Reviews
</div>
</div>
<div class="col-sm-6 foot-section">
<div class="foot-content">
<h2><strong>Contact</strong></h2>
</div>
</div>
<h5>Copyright © X Ltd 2020, All Rights Reserved. |</h5> Privacy Policy
</div>
</div>
I have an aurela app that needs to be able to print out labels. On the page with the form there is a hidden div that contains the layout of the label. I want to print only the hidden div and i want it to be stretched(with content) to be ful size of the page in landscape. Currently it only fills a small corner of the page.
JSFiddle Label
This is the CSS i have tryed to get it working. Weird thing is changes to the #page does nothing. I tryed different page sizes but nothing affects the div, it still sits in the one corner.
#media print {
header, footer, .print-hidden {
visibility: hidden;
}
#page {
size: auto;
margin: 0mm;
}
html, body {
height: 100%;
width: 100%;
}
.print-show{
display: block;
position: absolute;
width: 100vw;
height: 100vh;
top:0;
bottom:0;
}
}
This is the aurelia template for the label
<template bindable="firstname, lastname, company, inviter, uniquecode">
<div class="label-container">
<div class="row justify-content-start mx-0 px-1 pt-1">
<div class="text-center">
<img class="label-logo" src="image.png">
<div class="visitor-logo">VISITOR</div>
</div>
</div>
<div class="flex-row text-center label-name">
<div>${firstname}</div>
<div>${lastname}</div>
</div>
<div class="text-center label-company">
${company}
</div>
<div class="row justify-content-between mx-0 px-1">
<div>
<div class="label-guestof">Guest of</div>
<div class="label-inviter">${inviter}</div>
</div>
<span>${uniquecode}</span>
</div>
</div>
And here are the custom css classes for the label:
.label-container{
width: 350px;
height: 188px;
}
.visitor-logo{
font-weight: normal;
font-size: 15px;
color: #505659;
}
.label-name{
font-weight: 600;
font-size: 28px;
color: #2B3033;
}
.label-company{
font-weight: normal;
font-size: 12px;
color: #737B80;
}
.label-guestof{
font-weight: normal;
font-size: 10px;
color: #737B80;
}
.label-inviter{
font-weight: 600;
font-size: 12px;
color: #505659;
}
.label-logo{
height: 28px;
width: 60px;
}
I restyled it a little bit and added a background color for a better check. I hope this is what you're seeking. If not is was kinda fun to do it :P.
<!--index.html-->
<div class="label-container">
<div class="label-container__header mx-0 px-1 pt-1">
<div class="text-center">
<img class="label-logo" src="image.png">
<div class="visitor-logo">VISITOR</div>
</div>
</div>
<div class="label-container__names label-name">
<div>${firstname}</div>
<div>${lastname}</div>
</div>
<div class="label-container__company label-company">
${company}
</div>
<div class="label-container__footer justify-content-between mx-0 px-1">
<div>
<div class="label-guestof">Guest of</div>
<div class="label-inviter">${inviter}</div>
</div>
<span>${uniquecode}</span>
</div>
</div>
// style.css
html, body {
height: 100%;
width: 100%;
}
.label-container {
width: auto;
height: 100%;
background-color: #aaa;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.label-container__header {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.label-container__names {
display: flex;
flex-direction: column;
align-items: center;
}
.label-container__company {
display: flex;
justify-content: center;
}
.label-container__footer {
display: flex;
justify-content: flex-end;
}
.visitor-logo{
font-weight: normal;
font-size: 15px;
color: #505659;
}
.label-name{
font-weight: 600;
font-size: 28px;
color: #2B3033;
}
.label-company{
font-weight: normal;
font-size: 12px;
color: #737B80;
}
.label-guestof{
font-weight: normal;
font-size: 10px;
color: #737B80;
}
.label-inviter{
font-weight: 600;
font-size: 12px;
color: #505659;
}
.label-logo{
height: 28px;
width: 60px;
}
I have one div containing 3 divs.
original
HTML code
.state {
background-color: rgba(233, 234, 237, 0.9);
height: 7vh;
width: 80%;
border-radius: 14px;
margin: 10px 0 15px 80px;
display: flex;
align-items: stretch;
}
.state-main {
text-align: center;
padding-top: 10px;
font-weight: 900;
font-size: 14px;
}
.options {
text-align: right;
margin-bottom: 10px;
}
.owner-image {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
<div class="state">
<div class="owner">
<img class="owner-image" src="img/uk.jpg">
</div>
<div class="state-main">
<p class="state-name">PENNSYLVANIA</p>
</div>
<div class="options">
<p id="time"></p>
<button>SEND TROOPS</button>
<button>ATTACK</button>
</div>
</div>
Use flexbox (browser support).
.state {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
background-color: lightgray;
}
.state,
.btns button {
text-transform: uppercase;
}
<div class="state">
<img src="http://placehold.it/150x80/fc0">
<p>
Pennsylvania
</p>
<div class="btns">
<button>Send Troops</button>
<button>Attack</button>
</div>
</div>
**For IE9 and older you'll need to provide a fallback. Whether or not you need to do this depends on target audience.
.State is the div that contains all 3. .state-main is yellow div and should go at the center. .options is green div should go far right. .owner-image is the red div, and should stay at the same place.
Using flex to put the layout into place.
.state {
display: flex;
justify-content: space-between;
}
.state-mail {
text-align: center;
}
<div class="state">
<div class="owner-image">
<img src="http://placehold.it/100x50" />
</div>
<div class="state-main">PENNSYLVANIA</div>
<div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div>
</div>