The image (#avatar) not resized in height with flex, I tried to put his hand height and it works. But I would very much like is done with flex.
Don't know if this is my mistake or error flex ...
Add full sample code.
It works well only when I add this in #avatar:
- height: 10vh;
body{
margin: 0;
}
.startContainer {
width: 100vw;
height: 100vh;
position: absolute;
background-image: url("http://i.imgur.com/NVYPtGJ.jpg");
background-size: cover;
background-repeat: no-repeat;
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-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.startSideItem {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 30vw;
-ms-flex: 0 1 30vw;
flex: 0 1 30vw;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.startCenterItem {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 40vw;
-ms-flex: 0 1 40vw;
flex: 0 1 40vw;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.sideItem {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.centerContainer {
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;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.topBottomCenterItem {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 1 1 30vh;
-ms-flex: 1 1 30vh;
flex: 1 1 30vh;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.centerItem {
-webkit-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-webkit-flex: 0 1 10vh;
-ms-flex: 0 1 10vh;
flex: 0 1 10vh;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#avatar {
display: block;
/*max-width:357px;
max-height:380px;
width: 100%;
height: auto;*/
max-width: 100%;
max-height: 100%;
}
.sideContainer {
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-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.arrow {
display: inline-block;
max-width:45px;
max-height:75px;
width: 100%;
height: auto;
}
#rotateLeft {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#rotateDown {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jorge Beltrán Núñez</title>
<link rel="stylesheet" href="css/preload.css">
<link rel="stylesheet" href="css/index.css">
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="startContainer">
<div class="startSideItem sideContainer">
<div class="sideItem">
<img alt="" class="arrow" id="rotateLeft" src="http://i.imgur.com/XBejH02.png">
<p>Sobre mi</p>
</div>
</div>
<div class="startCenterItem centerContainer">
<div class="topBottomCenterItem"></div>
<div class="centerItem">
<img alt="" id="avatar" src="http://i.imgur.com/m5U9gy2.png">
</div>
<div class="topBottomCenterItem">
<p>Contacto</p>
<img alt="" class="arrow" id="rotateDown" src="http://i.imgur.com/XBejH02.png">
</div>
</div>
<div class="startSideItem sideContainer">
<div class="sideItem">
<p>PortFolio</p>
<img alt="" class="arrow" src="http://i.imgur.com/XBejH02.png">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js"></script>
<!-- <script src="js/preload.js"></script>-->
</body>
</html>
But this fixes is a patch. I do not have it in the parent and in the image (child): max-height: 100%;
Image inside flex-item ignores max-height:100% in chrome and firefox - (works in safari)
Try This-
.centerItem {
order: 0;
flex: 0 1 10vh;
overflow: hidden; /*NEW*/
align-self: auto;
}
Related
I need help in writing a css fix for aligning the logo and navbar in desktop and mobile responsive modes. No options available in customize menu. Thanks in advance.
My Site
Theme Used
Problem SS1
Problem SS2
Use can use Display flex CSS. Example your website:
<div id="header-text-nav-wrap">
<div id="header-left-section">
<!-- your logo here -->
</div>
<div id="header-right-section">
<!-- your menu -->
<!-- your searh and other -->
</div>
</div>
<style>
#header-text-nav-wrap{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#header-logo-image img{
max-height: 60px;
width: auto;
margin: 0 auto;
text-align: center
}
#header-right-section{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main-navigation,
.header-action{
padding-top: 0;
}
#media (max-width: 768px) {
.better-responsive-menu #header-text-nav-wrap{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.better-responsive-menu #header-logo-image {
float: none;
margin-bottom: 0;
margin-right: 0;
text-align: center;
}
.better-responsive-menu #header-right-section {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#header-right-section .header-action{
min-width: 200px;
padding-right: 15px;
}
}
</style>
I am using CSS display: flex; to display them a certain way. In Chrome it looks perfect, like beautiful, but in IE the images go outside the element I have them in.
https://jsfiddle.net/m42k7Lk5/8/
.award-logos {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center
}
.award-logos .wrapper {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px 17px;
margin: 5px 0;
text-align: center;
border-right: 1px dotted #000
}
.wrapper img {
max-height: 150px
}
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg">
</div>
</div>
Can anyone help?
How can i make my footer stick to the bottom of the page with almost no content?
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
in CSS:
footer{
position:fixed;
bottom:0;
text-align: center;
width: 100%;
}
or you could inline it:
<footer style="position:fixed; bottom:0; text-align: center; width: 100%;">
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
Using CSS:
<style>
footer {
width:100%;
position: fixed;
bottom: 0px;
text-align: center; /* This line is not needed but centers your text */
}
</style>
<footer>
<hr>
<p> © 2017 Sindre Berge <p>
</footer>
See it in action and play with it here: https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP
Or try the flex solution proposed by Sam. This will not cause the footer to not always be at the bottom of the browser view but instead at the bottom of the page.
Flex solution:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>
I personally like to use
footer{
position:absolute;
bottom:0;
width: 99%;
}
as I've found that sometimes the site will go haywire -- especially as far as the width is concerned, as by itself I am sometimes greeted by a nasty horizontal scroll bar at the bottom, despite everything fitting onto the screen nicely.
Block solution:
footer {
display:block;
position:fixed;
bottom:0;
}
Flex solution:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
/*I give height 700px but can be adapted to a body being 100%*/
height:700px;
background:#cccccc;
}
.flex-content {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
background:#ca33aa;
height:100px;
}
<div class="flex-container">
<div class="flex-content">
This is my footer
</div>
</div>
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
To be more specific, I have a flexbox:
.main{
display: flex;
display:-webkit-flex;
-webkit-align-items: stretch;
align-items: stretch;
-ms-flex: 3;
-webkit-box-flex: 3;
-moz-box-flex: 3;
-ms-box-flex: 3;
box-flex: 3;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
border: 1px solid yellow;
height: 100%
position: absolute;
top: 0;
bottom: 0;
}
.landing-img{
border: 1px solid red;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
align-self: flex-end;
height: inherit;
}
img{
max-width: 80%;
}
<div class="main">
<div class="landing-img">
<img src="images/someimg.png" style="min-width:100%;"/>
</div>
</div>
in which the image extends out of its div element. I am trying to set the height of the image container to match height of its parent(main). I have tried to use the inherit, doesn't work. I tried height 100% doesn't work. webpage i am working on to get a visual reference