How can I keep the css grid template for a fixed header? When I add position: fixed; to my header div the elements within dont stay in their positions
https://codepen.io/anon/pen/MLwBpW
.container {
display: grid;
margin: 20px;
}
#header {
position: fixed;
width: 100%;
grid-column-start: 1;
}
h1 {
font-size: 2em;
margin: 0;
}
h2 {
margin: 5px;
grid-column-start: 2;
grid-column-end: 3;
}
p{
grid-column-start: 3;
grid-column-end: 3;
font-size: 1.2em;
width: 600px;
}
Related
I have a dynamic table whose first three columns are sticky and the rest relative. When there is horizontal overflow-x, the first non-sticky column is positioned behind the sticky column. How can I style the components to make sure the first non-sticky column is positioned directly to the right of the first three sticky columns?
Styled-Components:
const TableDiv = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1100px!important;
overflow-x: auto;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
`
const Table = styled(MDBTable)`
&& {
align-self: center;
width: auto;
max-width: 80vw!important;
overflow-x: auto;
& tr, td {
background-color: #fff;
}
background-color: #fff;
z-index: 2;
& :not(caption) > * > * {
border: 0;
}
& .float-right {
text-align: right!important;
}
& .item, .label {
text-align: left;
background-color: #fff;
}
& td, th {
position: relative;
text-align: center;
transition: width 2s ease, min-width 2s ease, max-width 2s ease;
z-index: 1;
}
& tr th:first-child, tr td:nth-child(-n + 2) {
position: sticky;
left: 0;
z-index: 3;
}
& tr th:nth-child(n + 2), tr td:nth-child(n + 2) {
margin-left: 162px;
}
& tr td:nth-child(2) {
position: sticky;
left: 17px;
z-index: 3;
border-left-width: 0;
}
}
`
I'm attempting to replace one image with another, and I know a common way is to shift one image and use a background-image. Unfortunately it's just showing completely blank for me when I do this.
Here's a code pen showing what I mean:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And here's the relevant CSS. Any ideas?
It's returning a 403 forbidden error when I check the console.
#main {
display: grid;
grid-template-areas:
'chat_bubble character_image'
'button_menu character_image';
grid-template-columns: 5fr 1fr;
place-items: center;
}
#chat_bubble {
grid-area: chat_bubble;
width: 70vw;
height: 70vh;
padding-left: 2vw;
padding-right: 2vw;
padding-top: 2vh;
padding-bottom: 2vh;
margin-bottom: 1vh;
}
#character_image {
grid-area: character_image;
margin-top: 2vh;
}
#character_image > img {
max-width: 100%;
}
#char_1 {
display: inline-block;
}
#button_menu {
grid-area: button_menu;
display: grid;
grid-template-columns: auto auto;
gap: 1em;
}
#media (max-width: 700px) {
#main {
grid-template-areas:
'chat_bubble chat_bubble'
'button_menu character_image';
grid-template-columns: 4fr 1fr;
}
#character_image > img {
height: 100px;
max-width: unset;
padding-top: 100px;
background-image: url('https://i.imgur.com/sRSVW2D.png') !important;
}
.container:after {
content: '';
position: absolute;
bottom: 0;
top: unset;
right: unset;
left: 75%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}
Instead of using background-image in media queries, change src of the image on screen resize.
window.addEventListener('resize', ()=>{
if(window.innerWidth > 700) {
image.src = 'firstimage.jpg';
} else {
image.src = 'secondimage.jpg';
}
});
Use content: url() as
#character_image > img {
height: 100px;
max-width: unset;
/* padding-top: 100px; */
content: url("https://i.imgur.com/sRSVW2D.png");
}
Codepen
I'm learning css(scss) and i've problem with stylistic my text.
How i can get text in one line and how to center icon from fontawsome to the text?
main {
overflow: hidden;
opacity: 0.6;
.icons {
display: block;
position: relative;
font-size: 3rem;
opacity: 1;
.fire {
color: red;
display: flex;
padding-top: 5%;
padding-left: 3%;
position: absolute;
margin-top: 10%;
p {
padding-left: 5%;
display: flex;
color: blanchedalmond;
}
}
}
}
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;
}
I can make this layout using float easily. but having hard time to do with flex box.
css :
.a {
background: red;
float: left;
width: 30%;
height: 100px;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue
}
html:
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
many thanks in advance.
Flexbox codepen demo
How does it work?
Wrap your columns in a common parent (e.g. a main element) with an height set. Then place your elements with flex-direction: column and create a space between b and c with justify-content: space-between.
The height of the column a is 100% of the container so b and c can shift into a new column thanks to flex-wrap: wrap.
CSS
main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.a {
background: red;
height: 100%;
width: 30%;
}
.b, .c {
background: green;
height: 45px;
width: 70%;
}
.c {
background: lightblue
}
Grid Layout demo
How does it work?
With Grid Layout you could achieve the same thing by creating a layout with 10 columns and 2 rows and a gap between b and c with row-gap: 10px. Then adjust all the various (column|row)-(start|end)
CSS
main {
display: grid;
grid-template-columns: repeat(10, 1fr);
row-gap: 10px;
width: 100%;
}
.a {
background: red;
grid-area: 1 / 1 / 3 / 3;
}
.b,
.c {
grid-column: 3 / 11;
background: green;
overflow: hidden;
height: 45px;
}
.b {
grid-row-start: 1;
}
.c {
grid-row-start: 2;
background: lightblue;
}
You can achieve this by using grid by wrapping a,b,c in a grid-container
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.a {
background: red;
/* width: 30%; */
height: 100px;
grid-row-start: 1;
grid-row-end: 3;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue;
}
<div class="grid-container">
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
</div>