How do I make the content take up the margin space when the browser is resized smaller?
http://jsfiddle.net/denWG/62/
Html:
<div class="jp-sleek jp-jplayer jp-audio">
<div class="jp-gui">
<div class="jp-controls jp-icon-controls">
<div class="jp-progress">
</div>
</div>
</div>
</div>
CSS:
.jp-jplayer {
min-width: 900px;
}
.jp-sleek .jp-gui {
height: 42px;
background-color: #e5e5e5;
position: relative;
}
.jp-sleek .jp-gui .jp-controls {
height: 100%;
position: relative;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50%;
}
.jp-sleek .jp-gui .jp-icon-controls .jp-progress {
background-color: green;
height: 100%;
width: 600px;
min-width: 240px;
position: relative;
}
Here's what it does at the moment:
I want the margins on the left and right to shrink down and for the green bar to get bigger and take up more margin space until it's 100% as the screen size gets smaller.
You need to set width: 100%; to .jp-jplayer and min-width: 450px to .jp-sleek .jp-gui .jp-controls:
.jp-jplayer {
width: 100%;
}
.jp-sleek .jp-gui {
height: 42px;
background-color: #e5e5e5;
position: relative;
}
.jp-sleek .jp-gui .jp-controls {
height: 100%;
position: relative;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 50%;
min-width: 450px;
}
.jp-sleek .jp-gui .jp-icon-controls .jp-progress {
background-color: green;
height: 100%;
width: 600px;
min-width: 240px;
position: relative;
}
<div class="jp-sleek jp-jplayer jp-audio">
<div class="jp-gui">
<div class="jp-controls jp-icon-controls">
<div class="jp-progress">
</div>
</div>
</div>
</div>
Related
I have 2 parent containers in my code below. The first one is just for reference for what I want my second container to look like. The difference between the two is the first one I used absolute positioning and flex display but the second one is grid display. What I'm stuck on is understanding how to center class .item1 and position class .item2 all the way to the right just how it's like on the first parent container i.e class .topAdCon. My specific questions are 1) how to center .item1
2) how to set .item2's position all the way to the right (right: 0%)
3) on the first parent container I just set top: 0% to align it all the way to the top because it has absolute positioning how can I set the positioning of the second parent container where ever I want currently I'm using margin-top for top positioning is that the way to go or what is the right way?
4) Lastly how do I set the height for the second container because height isn't responding as it does on the first container?
Note: I commented out things I tried in order to achieve these things but they aren't working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
align-items: center;
justify-content: center;
/*position: relative;
top: 20%;*/
margin-top: 20%;
grid-template-columns: 40% 17%;
width: 100%;
height: 18%;
/*height not responding*/
background-color: gold;
}
.item1 {
/*align-self: center;*/
width: 100%;
height: 100%;
}
.item1 img {
width: 100%;
height: 100%;
}
.item2 {
display: flex;
text-align: center;
/*align-self: flex-end*/
width: 100%;
height: 100%;
border: 1.5px solid #000000;
}
.item2 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2">
<p>this is test statement 2</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
margin-top: 20%;
grid-template-columns: 30% 40% 12% 18%;
grid-template-areas: 'item item1 item2 item3';
width: 100%;
height: 18vh;
background-color: gold;
}
.item1 {
width: 100%;
height: inherit;
}
.item1 img {
width: 100%;
height: 100%;
}
.item3 {
display: flex;
text-align: center;
justify-content: end;
width: 100%;
height: inherit;
border: 1.5px solid #000000;
}
.item3 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item"></div>
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2"></div>
<div class="item3">
<p>this is test statement 2</p>
</div>
</div>
I am trying to create a modal that has a footer and an header. The content has two columns: LeftSection and RightSection. I want to have the second column fill the height of the content depending on what the first columns height is (which can differ based on content). From the snippet, this means to have the black div go down as much as the red one does.
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
}
.RightSection {
width: 100%;
background-color: black;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
Do you want this?
.Container {
margin: auto auto;
width: 80vw;
height: 250px;
background-color: #8080801a;
flex: 1;
display: flex;
flex-direction: column;
}
.Header {
height: 50px;
width: 100%;
background-color: #61dafb;
}
.FlexContainer {
flex: 1;
display: flex;
overflow: auto;
}
.LeftSection {
width: 200px;
height: 400px;
background: red;
position: sticky;
top: 0;
}
.RightSection {
width: 100%;
background-color: black;
position: sticky;
top: 0;
}
.Footer {
height: 50px;
background-color: blue;
width: 100%;
}
<div class="Container">
<div class="Header"></div>
<div class="FlexContainer">
<div class="LeftSection" ></div>
<div class='RightSection' ></div>
</div>
<div class='Footer' />
</div>
What the .image element needs to do is adjust dynamically to both vertical and horizontal browser resizing. The .link element must also surround only the .image element (i.e., height: 100% cannot be used on the .link element).
The problem is that both the .link and .image elements extend beyond the bottom of the .container when the height of .image exceeds the height of .container.
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: 0;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: 480px;
max-width: 100%;
max-height: 100%;
padding: 0.25rem;
background-color: red;
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: grey;
}
<body>
<div class='component'>
<div class='container'>
<a href='#' class='link'>
<img src='https://via.placeholder.com/150' class='image' />
</a>
</div>
</div>
</body>
I hope this is what you are looking for
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: auto;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: 480px;
max-width: 100%;
height: calc(100vh / 3);
padding: 0.25rem;
background-color: red;
}
.image {
display: block;
background-color: grey;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="component">
<div class="container">
<a href="#" class="link">
<img
src="https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg"
class="image"
/>
</a>
</div>
</div>
How about you use display:flex on .link ?
* {
box-sizing: border-box;
}
.component {
margin: auto;
width: 50%;
height: 0;
min-height: calc(100vh / 3);
background-color: blue;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: green;
}
.link {
width: auto;
max-width: 100%;
max-height: 100%;
padding: 0.25rem;
background-color: red;
display: flex /*Add this*/
}
.image {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: grey;
}
<body>
<div class='component'>
<div class='container'>
<a href='#' class='link'>
<img src='https://via.placeholder.com/150' class='image' />
</a>
</div>
</div>
</body>
I'm having a problem with my flex container basically just leaving the page and going like this:
I tried setting display to table and using <td> elements to put my things in, but it stayed out of the frame. I want it to be a flex container that will contain the first <div>, and the <header>s.
HTML:
<div class="presen">
<div class="tisane"> <!--overlap d'images-->
<img id="img1" src="images/herbal-tea-cup-png-images-35.png" alt="Tasse d'infusion de millepertuis" />
<img id="img2" src="images/noircontourthe.png" alt="" />
</div>
<header>
</header>
</div>
CSS of relevant elements:
.tisane {
display: inline-flex;
}
.tisane img#img1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 220px;
position: absolute;
top: 300px;
left: 140px;
z-index: 2;
}
.tisane img#img2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 330px;
height: 230px;
position: absolute;
top: 298px;
left: 130px;
z-index: 1;
}
header h1 {
text-align: center;
}
.presen {
display: flex;
flex-direction: column;
top: 298px;
padding: 0;
}
Thanks.
You need to set the height of your body and presen class.
.tisane {
display: inline-flex;
}
.tisane img#img1 {
display: block;
margin: 0 auto;
width: 300px;
height: 220px;
position: absolute;
top: 300px;
left: 140px;
z-index: 2;
}
.tisane img#img2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 330px;
height: 230px;
position: absolute;
top: 600px;
left: 130px;
z-index: 1;
}
header h1 {
text-align: center;
}
.presen {
display: flex;
flex-direction: column;
top: 298px;
padding: 0;
height: 100%; //The height of a flexbox can be also set to a percentage
}
body {
height: 100vh;
}
<div class="presen">
<div class="tisane"> <!--overlap d'images-->
<img id="img1" src="https://via.placeholder.com/250" alt="Tasse d'infusion de millepertuis" />
<img id="img2" src="https://via.placeholder.com/250" alt="" />
</div>
<header>
</header>
</div>
I have an horizontal scrollbar class="filter_list" into a wrapper div class="wrapper". I want this scrollbar to be always 100% of the wrapper div and I want this wrapper div to be responsive.
It's working fine if I only have one item in my filter list but as soon as I put more than the wrapper width size, it's not responsive anymore.
Here are some pictures to illustrate the problem :
Responsive and working fine :
OK
The scrollbar is blocking the width of the wrapper that doesn't shrink to fit the dimension of the window (we can see that the picture of the girl is no longer it's 100% square size):
NOT OK
Here is the code :
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 800px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.magic_wand {
margin: 15px 0px 20px;
max-width: 50px;
}
.ico_magic_wand {
width: 100%;
height: 100%;
object-fit: contain;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.filter_list {
width: 100%;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
<body>
<div class="wrapper">
<div class="magic_wand">
<img src="img/ico/magic_wand.png" class="ico_magic_wand">
</div>
<div class="picture_preview">
<img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
</div>
<div class="filter_list">
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
</div>
</div>
</body>
I would like to understand why the div class="filter_list" width won't shrink with it's parent div while reducing the width of the window and how to fix the problem, thanks a lot !
Try this code.. I can't understand your question.. it may ur expectation,, else explain it clearly..
css
.filter {
display: inline-block;
height: 150px;
width: 21.3%;
background-color: blue;
margin-right: 15px;
}
.filter:nth-child(4n+4) {
margin-right: 0px;
}
Please remove ur css code and add this codes.. I think display:flex; is the issue for ur code..
body {
margin:0px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
.magic_wand {
margin: 15px auto 20px;
max-width: 50px;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
height: 100%;
}
.filter_list {
width: auto;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
#media only screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
}