I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.
It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.
The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.
What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!
EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.
Before Browser height reduction ---> After
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
font-size: 0;
min-width: 0;
min-height: 0;
background-color: yellow;
}
.context {
display: flex;
min-height: 0;
background-color: blue;
}
.content img {
height: 100%;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
}
.primary img {
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mobile .nightMode .primary img {
border-style: solid;
border-width: 3px;
border-color: black;
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary"><img src="https://via.placeholder.com/200">
<div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
</div>
<div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div></div>
</div>
</div>
</div>
I think this could be a possible solution, #img1 being the first of the secondary images:
img {
max-width: 100%;
}
#img1 {
height: 20vw;
max-height: 150px;
min-height: 75px;
}
.primary img {
height: 50vw;
max-height: 200px;
}
These rules address the question, although there are still some issues with this approach that could be of importance.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
Related
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
I have been tweaking my CSS to make my page look good on mobile and other sizes of the window. I got it to mostly look good, but the only thing I don't like is when the window is medium sized (for like a tablet) there are 2 boxes on one line and the third on the second. This looks really bad in my opinion. Is it possible when the third box gets pushed to the second line, to make all three into a column and upgrade the size of each box a bit to fill some of the empty space?
I've been looking into flex-grow/shrink and I'm not really understanding them to see if that's what I need. I also know there's a media query thing, but don't really understand that either. Here is my current page which doesn't resize: www.catherinemeza.com
Below is my tweaked code so far: (comments are old code or something I've tried to make stuff resize)
body {
background-color: #e9cffb;
margin-top: 100px;
}
.About {
font-size: 20px;
}
.Name {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
#All {
height: 500px;
/* width: 1500px;
margin: 50px auto; */
/* border: 5px solid black; */
/* box-sizing: content-box;
width: 100%; */
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
#ALL > * {
flex: 1 1 0;
}
#One {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #One p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
} */
/* #One:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
} */
.Two {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* .Two p {
width: 500px;
height: 500px;
position: absolute;
margin-left: 10px;
bottom: -600px;
z-index: 1;
transition: 1s;
text-align: center;
color: rgb(218, 202, 228);
background-color: rgb(7, 70, 21);
border: .5px green solid;
border-radius: 20px;
}
.Two:hover p {
opacity: .7;
bottom: -10px;
width: 500px;
height: 175px;
} */
#Three {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #Three p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
}
#Three:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
}
a {
text-decoration: none;
font-size: 20px;
color: chartreuse;
} */
The link you provided doesn't work for me, but you can solve this using media queries and flexbox. What you want to do is open dev tools so you can see the current width of your page in pixels. Resize your page down to the point you want to change (for your case, when the third box goes into the second row). Create a media query for when the screen is that px or less, which you can then add styles to edit the boxes' width and layout. I included an example below.
Breaking it down, this code is saying that when the screen width is 992px or lower, make #All a column-layout and align the items at the center. Also, change the width of each box to take up 100% of its container. You can edit the styling as you wish but if you have any questions don't be afraid to ask!
#media screen and (max-width: 992px) {
#All {
flex-direction: column;
align-items: center;
}
#One, .Two, #Three {
width: 100%;
}
}
I'm trying to implement a zoom in/out functionality, just like you would have on a document editor like google docs or any word processor application. The problem I'm having is that I cannot keep the "document" centered and also be able to scroll all of its parts into view. Here is a small demonstration of the problem: https://codepen.io/liviu_vasut/pen/dyGbwwO
document.getElementById('objectToScale').style.transform = "scale(3)";
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: center;
transform: scale(1);
}
<div class="container">
<div id="objectToScale" class="object">x</div>
</div>
Thanks for your time.
You scale only some inner element inside the whole box, but expect see the whole box scaled. if you want to scale the white padding and all the inner content to stay visible (and be able to scroll to) you should add some wrapper inside with width: 100% and height: 100%, and scale it, so the whole content become scaled.
Also, as #HaoWu mentioned, you should set the transform-origin to 0 0.
The final product should look somewhat like this:
var scaled = false;
function toggleScale() {
var objects = document.getElementsByClassName('wrapper');
for (var i = 0; i < objects.length; i++) {
objects[i].style.transform = scaled ? 'scale(1)' : 'scale(3)';
}
scaled = !scaled;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
justify-content: center;
padding: 5px;
transform-origin: 0 0;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: center;
transform: scale(1);
}
<input type="button" onclick="toggleScale()" value="Toggle Scale" />
<div class="container">
<div class="wrapper">
<div id="objectToScale" class="object">x</div>
</div>
</div>
Actually, use the transform-origin: 0 0; and manually set the scrollbar to the center:
var scaled = false;
function toggleScale() {
[...document.getElementsByClassName('object')].forEach(e => {
e.classList.toggle('scaled');
e.parentElement.scrollTop = (e.parentElement.scrollHeight - e.parentElement.clientHeight) / 2;
e.parentElement.scrollLeft = (e.parentElement.scrollWidth - e.parentElement.clientWidth) / 2;
});
}
* {
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
width: 300px;
height: 200px;
border: 1px solid #000000;
left: 0px;
top: 0px;
margin: 10px;
overflow: auto;
}
.object {
position: relative;
width: 120px;
height: 120px;
display: inline-block;
background-color: grey;
border-radius: 25px;
padding: 5px;
transform-origin: 0 0;
}
.scaled {
transform: scale(3);
}
<input type="button" onClick="toggleScale()" value="Toggle Scale" />
<div class="container">
<div class="object">cannot see the entire object when scaled</div>
</div>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Inline block adding bottom space
(3 answers)
Closed 4 years ago.
So, there seems to be some whitespace added to an element on my page when I set the display to be inline-block. Is there a way to get rid of this white space without changing the line-height to 0px or changing the display type to block and manually setting a width? I may want the red element below to expand dynamically based upon the content in the future.
This is what I want (no green below the red):
This is what I am getting (green below the red):
Here's a JSFiddle of the issue: https://jsfiddle.net/rstL6omk/5/
The additional space is from the box model for laying out the "inline" elements including all inline-block or inline element. It seems like voodoo because you don't see it in the box-model for the elements involved. If you set font-size: 0; on .nav_container it goes away.
The problem is that you have overflow: hidden on your .logo_container. Removing this will get rid of the 4 pixels at the bottom of the element.
Then you simply need to make use of height: auto (the default for height) on .brand_logo_icon in order for it to expand based on its content.
This can be seen in the following:
body {
background: rgb(40, 40, 40);
font-family: Helvetica, Arial, sans-serif;
font-weight: lighter;
user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
margin: 0;
cursor: default;
color: rgb(60, 60, 60);
}
div {
box-sizing: border-box;
}
#supports(padding: max(0px)) {
.container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
#nav .nav_container {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
}
#nav {
padding: 0px;
display: block;
background: rgb(55, 155, 55);
}
.brand_logo_icon {
display: block;
background-color: rgb(200, 30, 30);
width: 60px;
}
#nav .logo_link {
position: relative;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 45px;
}
#nav .nav_container {
display: block;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#nav .nav_container .logo_container {
display: inline-block;
padding: 0px;
background: rgb(80, 80, 80);
border-radius: 0px 0px 5px 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}
#nav .nav_container .brand_logo_icon {
width: 70px;
}
.container {
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
transition: margin 225ms linear;
}
.container .splash:before {
content: "";
display: block;
padding-top: 56.2%;
}
.container .splash {
position: relative;
display: block;
width: 90vw;
max-width: 1300px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
}
.container .splash .splashimg {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0;
}
.container .content {
display: block;
position: relative;
left: 0;
richness: 0;
margin-left: auto;
margin-right: auto;
max-width: 1300px;
opacity: 1;
animation: introAnimation 400ms ease-in-out 0ms forwards;
vertical-align: top;
white-space: 0;
font-size: 0px;
}
.container .content.c {
text-align: center;
}
.container .content .home_img:before {
content: '';
display: block;
padding-top: 56%;
}
.container .content .home_img {
display: block;
background-color: rgb(30, 30, 90);
}
.container .content .item_block {
display: inline-block;
width: 50%;
padding: 10px;
vertical-align: top;
box-sizing: border-box;
text-align: center;
}
.container .content .item_block .poster:before {
content: '';
display: block;
padding-top: 151%;
}
.container .content .item_block .poster.sqr:before {
padding-top: 100%;
}
.container .content .item_block .poster {
display: block;
max-width: 550px;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
background-image: url('/assets/no_poster.png');
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="nav">
<div class="nav_container">
<div class="logo_container">
<div class="brand_logo_icon">ABC ABC ABC ABC ABC ABC ABC ABC</div>
</div>
</div>
</div>
<div id="container" class="container">
<div class="content">
<div class="home_img"></div>
</div>
</div>
I am trying to produce this effect with CSS. I have tried creating a box with a triangle and then using negative margin to overlap it onto the circle, but cannot get it right.
Many thanks for any help.
fiddle
https://jsfiddle.net/Hastig/n3w0tztv/
Getting the circle to stay vertically centered and have the text container min-height the height of circle is tricky and is not worked out in this example. A cheap fix is adding align-items: center to .container at a breakpoint with #media.
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: white;
height: 100vh;
}
.container {
display: flex;
width: 100%;
padding: 10px;
overflow: hidden;
}
.left {
position: relative;
display: flex;
width: 150px;
height: 150px;
margin-top: -4px;
margin-bottom: -4px;
margin-right: -17px;
background-color: #ec847c;;
border-style: solid;
border-color: white;
border-width: 4px;
border-radius: 100%;
z-index: 10;
}
.right {
position: relative;
display: flex;
flex: 2;
font-size: 20px;
color: white;
background-color: #4ca132;
}
.square {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: white;
overflow: hidden;
}
.square-top { top: 0; }
.square-btm { bottom: 0; }
.square::before {
content: "";
position: absolute;
display: flex;
width: 100%;
height: 100%;
transform: rotate(45deg) scale(2);
background-color: #4ca132;
z-index: 1;
}
.square-top::before { top: 50%; left: 50%; }
.square-btm::before { bottom: 50%; left: 50%; }
.text {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 20px 20px 40px;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="square square-top"></div>
<div class="square square-btm"></div>
<div class="text">
Roles play an extremely important part in family funtion.
</div>
</div>
</div>