this is what I have:
.thumbnail {
height: 600px;
width: 60%;
overflow: hidden;
}
.thumbnail img {
height: 600px;
width: auto;
}
the width of the image can be any size, maybe larger then the container div. how can I center it?
Use Flex for simple, as your question, assume image free size (No CSS set)
.thumbnail {
height: 600px;
width: 60%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.thumbnail {
height: 600px;
width: 60%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
<div style="width: 300px;">
<div class="thumbnail"><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /></div>
</div>
try adding this
.thumbnail img {
height: 600px;
width: auto;
display:block;
margin: 0 auto;
}
Related
I have a div with a text on the left part of it:
* {padding: 0%;margin: 0%;}
body {background-color: brown;}
.content_box {
height: 100%;
display: flex;
flex-direction: row;
background-color: brown;
padding: 1em;
border-radius: 0.5rem;
}
.content_box div {
display: flex;
flex-direction: column;
overflow: hidden;
margin-right: 1rem;
}
.content_box img {
object-fit: cover;
width: 30%;
/*height: 100%;
width: auto;
max-width: 100%;*/
}
.content_box .credentials {color: beige;}
.content_box .left {margin-left: auto;}
.content_box .right {margin-right: 100px;}
<div class='content_box'>
<div class='left'>
<div class='credentials'>Username</div>
<p>Posted message</p>
<div class='credentials'>01/01/2021</div>
</div>
<div class='right'>
...
</div>
</div>
I want to add an image on the right part of it. But it has to be set to the size of text(so if we have three lines of text image will be bigger than if we had one line of text, even if the image with 3 lines is 30x30 pixels, and 1 line text is 1024x1024 pixels)
I would love it if someone could edit my question because I'm not too good at English...
You could position the .content_box relative and the .right div absolute. So you can give it the height of it's parent. Finally give the image a max-height of 100%:
.content_box {
position: relative;
height: auto;
}
.right {
position: absolute;
height: 100%;
width: auto;
top: 0;
right: 0;
background-color: red;
}
.right img {
max-height: 100%;
width: auto;
}
I have tried to create a poker table in CSS, which I think is actually pretty decent as of now:
https://jsfiddle.net/78fcs01m/3/
CSS:
.poker-container {
display: grid;
width: 100vw;
height: 100vh;
.poker-table {
justify-self: center;
align-self: center;
max-width: 800px;
width: 100%;
max-height: 360px;
height: 100%;
background-color: $poker-table-outside-ring-color;
border-radius: 180px;
position: relative;
display: grid;
.outside-ring {
max-width: 740px;
max-height: 300px;
width: 100%;
height: 100%;
background: $poker-table-color-light;
background: radial-gradient(circle, $poker-table-color-light -30%, $poker-table-color-dark 90%);
position: absolute;
border-radius: 180px;
justify-self: center;
align-self: center;
border: 5px $poker-table-outside-ring-border-color solid;
}
.inside-ring {
max-width: 640px;
max-height: 200px;
width: 100%;
height: 100%;
border: 5px rgba($white-color, 0.5) solid;
position: absolute;
justify-self: center;
align-self: center;
border-radius: 180px;
}
}
}
HTML:
<div class="poker-container">
<div class="poker-table">
<div class="outside-ring"></div>
<div class="inside-ring"></div>
</div>
</div>
My problem, however, is that I would like it to be responsive to smaller window sizes etc. So if you resize the window you will see that the outer ring will first shrink, then the next ring, and so on. In principle I would like everything to resize together so the table aspect ratio stays the same, only scaled.
What am I missing here ?
Inside ring is smaller than outside ring (100px in max-width). But you defined width:100% for both of them. You should apply difference in width too.
.outside-ring {
width: calc(100% - 100px);
}
.inside-ring {
width: calc(100% - 200px);
}
I'm having trouble making my layout responsive
basically I only have one header and when I'm at lower resolutions the screen is completely buggy
the background which is 100vh and 100vw does not work
image:
in desktop resolution:
code:
function App() {
return (
<div className="Wrapper">
<div className="Header">
<div className="navtop Container">
<div className="LogoHeader">
<a>
<img className="img" src={Logo} />
</a>
</div>
<div className="SearchWrapper">
<form className="form">
<input className="input" />
</form>
</div>
<nav className="NavWrapper">a</nav>
</div>
</div>
</div>
);
}
css:
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
#root {
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
.Wrapper{
height: 100% !important;
background: red;
display: flex;
flex-flow: row wrap;
}
.Header{
width: 100%;
height: 140px;
color: rgb(255, 255, 255);
background: rgb(113, 89, 193);
transition: all 0.2s ease 0s;
}
.navtop{
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background:yellow;
}
.Container{
max-width: 1140px;
padding: 0px 30px;
margin: 0px auto;
}
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
min-width: 10em;
}
.img {
width: 150px;
}
.SearchWrapper {
background: yellow;
height: 100%;
display: flex;
align-items: center;
}
.input {
min-width: 200px;
}
.input:focus {
min-width: 300px;
}
.NavWrapper {
background: black;
height: 100%;
}
i really tried every possible solution i know i could change that with media queries
but i know i did something wrong in my css so i'm having this
I'm not exactly sure what you're aiming at, but there are at least 3 elements that are causing your header to not be able to shrink down fully to a mobile width below 440px.
Adjusting these 3 elements will get you going in the right direction, like so:
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
/*min-width: 10em;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 10em; /*ADD THIS*/
}
.img {
/*width: 150px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 150px; /*ADD THIS*/
height: auto; /*ADD THIS */
}
.input {
/*min-width: 200px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 200px; /*ADD THIS*/
min-width: 50px; /*ADD THIS*/
}
Or you could adjust these elements in a media query, like so:
#media (max-width: 480px) {
.LogoHeader {
min-width: unset;
width: 100%;
max-width: 10em;
}
.image {
width: 100%;
max-width: 150px;
height: auto;
}
.input {
width: 100%;
max-width: 200px;
min-width: 50px;
}
}
Of course, you may want to adjust the values as needed and make some other modifications, but this should at lease allow the header to shrink down to mobile width.
The point here is that .img had a fixed with 150px and the input had a min-width of 200px, and the .LogoHeader had a min-width of 10em so those fixed widths and min-widths along with the padding of the .Container and .LogoHeader was not allowing your entire Header to shrink below 440px.
Centering a flex item is easy. However I like to shift it upwards a bit so that the the relation between the upper and lower space is e. g. 1/2. Easy too when using fillers. But is there a way to do this whithout fillers?
HTML:
<div id="filler-top"></div>
<div id="the-item">
</div>
<div id="filler-bottom"></div>
CSS:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#filler-top {
width: 100%;
flex: 1;
}
#filler-bottom {
width: 100%;
flex: 2;
}
https://jsfiddle.net/Sempervivum/b2wotc8e/3/
Applying margin-top and margin-bottom doesn't work as a percentage is relative to the width.
instead of adding 2 elements to the markup, you can use :before and :after pseudo-elements:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
body:before {
content: "";
width: 100%;
flex: 1;
}
body:after {
content: "";
width: 100%;
flex: 2;
}
<div id="the-item"></div>
Another option is to simply use a mixture of position:relative, top and transform:
#the-item {
width: 80vw;
height: 30vh;
border: 2px solid lightblue;
position: relative;
top: 33.333%;
transform: translateY(-33.333%);
}
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
<div id="the-item"></div>
I'm trying to follow this tutorial:
https://css-tricks.com/full-browser-width-bars/#article-header-id-0
What I need, is my <header> element to be a max-width of 800px, centered in the middle of the page. Then inside that header bar, I will be having a #filtersBar div that will go across the whole body of the page (edge to edge). This is what my code comes out with so far:
Here is a fiddle:
https://jsfiddle.net/us2jsmLy/3/
html, body {
overflow-x: hidden;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1200px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background:red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
z-index: 1;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
dddd
</div>
</div>
</header>
I must be missing something stupid :/
As I understand, you can use :before pseudo for the full background edge to edge and also apply margin:0 to body
Updated Fiddle
html,
body {
overflow-x: hidden;
margin: 0;
}
div#filtersBar:before {
content: "";
position: absolute;
background: green;
top: 0;
bottom: 0;
left: -1000px;
right: -1000px;
z-index: -1;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 800px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background: red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
z-index: 1;
padding: 15px 0;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
/*margin: 0 auto;*/
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
</div>
</div>
</header>