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
Related
This is my CSS
.header {
overflow: hidden;
height: 60px;
background: #292940;
color: #fff;
}
.container {
flex: 1;
display: flex;
}
.sidenav {
width: 15%;
background-color: white;
}
#media (max-width: 640px) {
.sidenav {
display: none;
}
}
.main {
background-color: #f4f6f8;
padding: 20px 30px;
flex: 1 1 100px;
order: 1;
width: 85%;
}
#media (max-width: 640px) {
.main {
margin-left: 0;
padding: 10px;
}
}
This is working fine if have more content. But not able to 100% if right side content is less. Left side panel height automatically changing based on right side content
If I set height height: 100vh;
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
This what showing. Not 100% height
How to fix this issue? Thanks in advance
Please try:
.sidenav {
height: 100%;
position: fixed;
}
Just set your side panel height to the DOM 100% height.
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
If you want your sidenav to on the side when you scroll then set its position to fixed
.sidenav {
width: 15%;
height: 100vh;
position: fixed;
background-color: white;
}
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 have some trouble and I just a new in css grid, I have 2 grid and their height did not same with their height in responsive height, I put some code and image in below :
For image :
Image when I set to responsive :
I want to make my website in images one that don't have scrolling like my website that I set to responsive
This for code in css :
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 22px;
}
.container {
display: grid;
height: 10px;
}
.content-left {
background-color: #00c3ff;
padding: 1rem;
height: 44.3rem;
}
.content-right {
background-color: #ffffff;
padding: 1rem;
height: 44.3rem;
}
#media (min-width: 1025px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1025px) {
.content-left {
height: 82.4rem;
}
.content-right {
height: 82.4rem;
}
}
Just change your Heights to 100vh.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 22px;
}
.container {
display: grid;
height: 10px;
}
.content-left {
background-color: #00c3ff;
padding: 1rem;
height: 100vh;
}
.content-right {
background-color: #ffffff;
padding: 1rem;
height: 100vh;
}
#media (min-width: 1025px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1025px) {
.content-left {
height: 100vh;
}
.content-right {
height: 100vh;
}
}
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
#media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
#media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
I fixed it, it was the skrollr declaration on my script it was my own mistake thankyou for all the help i think the skrollr.js has issue with mobile.