.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>
EDIT: added in code snippit, Hope it helps
I trying to create a horizontal scroll div but when i add the content images all it does is squeeze all the images inside of it like so,
So its resizing the images to fit in but i would like them to be normal size and be able to scroll.
Now i tried to add overflow scroll but its not having that effect
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
Now i thought i knew enough on this to be able to do but obviously not! So any ideas will be appreciated.
Thanks
You can remove the flexbox rules. Then provide the image with some properties. Using white-space and overflow should work for you.
example:
.main-content {
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar {
width: 18%;
margin-right: 3%;
img {
width: 100%;
border: solid white 2px;
}
}
.profile-username {
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec {
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec {
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.prgile-third-sec img {
display: block;
width: 100%;
height: auto;
}
.profile-image-container {
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300"></div>
</div>
Flex have default wrap property, you can try on your code based on following stylesheet.
.className {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.class {
display: flex;
flex-wrap: nowrap;
}
Related
I'm trying to make an item center,but somehow it not work
Here is html part:
<div>
<div className={styles.unanswerQuestionContainer}>
<div className={styles.headerContainer}>
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
Here is css part:
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
But it show something like this:
It do not center the div, how can i center this ??
Edit: When i try to inspect then it show all of this is margin:
You need to add following style to outer div(parent) unanswerQuestionContainer
display: flex;
justify-content: center;
align-items: center;
height: 100%;
body{
height: 100vh;
margin: 0;
}
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.outer{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="outer">
<div class="unanswerQuestionContainer">
<div class="headerContainer">
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
You will have to adjust which css properties you will use in order to prevent the two h1 from overlapping.
<div className={styles.unanswerQuestionContainer}>
<div class="Questions">
<p id="question-type">Answered Question</p>
<p id="question-type">Unanswered Question</p>
</div>
</div>
.questions h1 {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have a pop-up modal which works overall, however the one annoyance is it has a hardcoded max-height which I'd like to eliminate.
Option #1:
Initially I explored using height: auto on the modal, which does keep the modal height to the natural height of the contents. However this effects the collapsing of the modal when you scale the browser viewport to a short height. The modal overflows out of the viewport, instead of only the green image area overflowing.
Option #2: I'm aware of the possibility of max-content (for height... or even max-height ?) but I haven't been able to get it to work anywhere, and anyhow it has spotty browser support.
Option #3 (current): Setting the modal to height: 100% and max-height: 500px is good enough, however obviously the content needs to be shorter than that.
Overall, requirements are:
A - In small screens, the modal should collapse with the green image area overflowing, thereby maintaining modal title and buttons in view.
B - In large screens, the modal height should only be as big as the contents.
C - Whatever happens, the modal should never visibly go past the global padding (2em).
See #modal in CSS below:
Demo and code here (Codepen)
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
/* OPTION #1 */
/* FAILS in small screen: overflow of green image not invoked */
/* height: auto; */
/* OPTION #2 */
/* Not working? */
/* height: max-content; */
/* OPTION #3 */
/* WORKS but specifying a max-height is not ideal */
height: 100%;
max-height: 500px;
width: auto;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
You are almost good, use max-height:100% and also add display:flex that will give the height:100% effect you are trying to achieve on the modal_inner
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
max-height: 100%;
display:flex;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
/*height: 100%; remove this*/
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
There is object-fit: contain as a way to resize the image so that the entire image fits within the frame, aligning the long side of the image with the frame.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.contain {
object-fit: contain;
}
<div>
<h2>object-fit: contain</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain" />
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" />
</div>
However, this does not work for div tags and so on, it works only for replacement elements.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
.contain-parent {
width: 150px;
height: 100px;
background: red;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
background: green;
margin-top: 10px;
}
.contain1 {
width: 50px;
height: 80px;
background: blue;
object-fit: contain;
}
.contain2 {
width: 80px;
height: 50px;
background: blue;
object-fit: contain;
}
<div>
<h2>object-fit: contain(not work)</h2>
<div class="contain-parent">
<div class="contain1"></div>
</div>
<div class="contain-parent">
<div class="contain2 narrow"></div>
</div>
</div>
How can I reproduce the same behavior as object-fit: contain on replacement elements with div tags,
span tags and so on? I want to display letter box when the aspect ratio does not match.
I have a design that I need to replicate with CSS.
The background should be centered in the div
I tried using gradients, but they are not looking good on different browsers.
You can do it this way with Flexbox :
Codepen
section {
border: #f00 solid 2px;
display: flex;
align-items: flex-end;
height: 400px;
}
section .aligner {
border: #00f dashed 1px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
position: relative;
}
section .aligner .background {
background: #ff0;
width: 100%;
height: 60%;
}
section .aligner .square {
position: absolute;
width: 300px;
height: 100%;
background: #008000;
}
<section>
<div class="aligner">
<div class="background"></div>
<div class="square"></div>
</div>
</section>