It works when I do a URL from the internet, but not from a local file path. My directory of folders go
Website (folder with everything) --> images --> album --> tyler.jpg
so something with my link is messed up but I have tried everything I can think of.
.nav {
background: #ddd;
padding: 20px;
margin: 0;
}
.nav a {
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
grid-gap: 1em;
margin: 30px 100px 30px 100px;
overflow: hidden;
}
.grid > * {
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}
.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: url('Images/album/tyler.jpg');
color: #fff;
}
you should use a relative path starting with "/"
background-image: url('/images/album/tyler.jpg');
otherwise it will just append the path to the current url
Related
I recently wrote a simple TicTacToe web app using Angular and deployed it here.
Whenever I inspect in browser on my laptop, all mobile dimensions look fine.
But when I visit the website on mobile devices, the styling messes up.
iPhone 7+ doesn't display the grid.
iPhone SE displays a wacky grid.
I've tried different browsers on desktop and mobile and the results are the same as above.
SCSS for the 3x3 game board:
main {
display:grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 6px;
text-align: center;
justify-content: center;
padding: 12px;
align-items: center;
}
app-square {
border-radius: 12px;
height: 100px;
}
.newGameButton:hover {
color: bisque;
background-color: black;
}
SCSS for the squares in the game board:
.square is a button.
.square {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
}
.square:hover {
opacity: 1;
background-color: rgb(255, 255, 255);
}
.Xsquare {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
background-color: #14F195;
}
.Osquare {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
background-color: #9945FF;
}
GitHub repo
UPDATE 1: Changed the square button into a div and it fixed it but this still doesn't explain why the button styling bugs.
I have a 1x4 grid that looks like this.
The problem is that when the screen is widened, the buttons sometimes get cut off, and when they don't they're too horizontally stretched.
I would like to adjust the 1x4 grid to become a 2x2 when there's not enough vertical space.
I know this is possible with flex containers, but I'm failing in my attempts to figure out how.
This is my codepen:
https://codepen.io/TheNomadicAspie/pen/ZEKYwWJ
And this is the relevant code:
.multiple-choice {
}
.answer-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.button-container {
grid-columns: 2/3;
height: %;
padding-left: 5%;
}
.button-container button {
width: 100%;
}
.button {
display: inline-block;
height: 100%;
text-decoration: none;
background: black; /*Button Color*/
color: #f5f5f5;
border-bottom: solid 4px #f5f5f5;
border-radius: 3px;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.btn:active {
/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px); /*Move down*/
border-color: black; /*disappears*/
}
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 tried to rebuild this Square Grid: how-to-create-a-flexible-square-grid-with-css-grid-layout
It works until I put images into the grid elements: Photo wall
.square-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-auto-rows: 1fr;
grid-auto-flow: dense;
}
.square-container::before {
content: '';
width: 100%;
height: 0;
padding-bottom: 100%;
grid-row: 1 / 2;
grid-column: 1 / 1;
}
.square-container > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
/* Just to make the grid visible */
.square-container > * {
background: rgba(0,0,0,0.1);
border: 1px solid grey;
opacity: 0.75;
}
.square-container > *:focus,
.square-container > *:hover {
border: 1px solid blue;
opacity: 1;
}
.square-container img
{ object-fit: contain; width:100%; height:auto; padding:0; margin:0; }
How can I fit the img-elements into the whole size of the grid-element?
.square-container img {
object-fit: cover;
width:100%;
height:100%;
}
creates a rectangle. A fixed grid-auto-rows: 15rem creates a near-square but then I can abstain from the pseudo element.
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>