I have a piece of styled-components CSS here. How should I fix it to remove the blank space below the rendered web?
const Tetris = () => {
return (
<StyledTetrisWrapper>
<StyledTetris>
<Stage stage={createStage()} />
<aside>
<div>
<Display text="Score" />
<Display text="Rows" />
<Display text="Level" />
</div>
<StartButton />
</aside>
</StyledTetris>
</StyledTetrisWrapper>
)
}
const StyledTetrisWrapper = styled.div`
background: url(${bgImage2}) #000;
width: 100 vh;
height: auto;
overflow: hidden;
background: cover;
`
Image of the error here:
enter image description here
const StyledTetrisWrapper = styled.div`
background: url(${bgImage2}) #000;
width: 100vw;
height:100vh;
overflow: hidden;
background-size: cover;
`
I added background-size cover and height 100vh;
Related
Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.
import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";
function Carousel() {
return (
<div className={styles.carousel}>
<div
className={styles.carouselInner}
styles={{
backgroundImage: `url(${legend})`,
}}
>
{/* <img src={images[0].img} /> */}
</div>
</div>
);
}
export default Carousel;
.carousel {
width: 60%;
height: 700px;
/* background-color: black; */
}
.carouselInner {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
This is how I put my folder directory looks like
I have written a simple navbar that has a scroll animation.
Example:
<div className={"nav active"}>
Here CSS on active is not working. Even if I write .active or nav.active in my CSS file, I have no result. In my code I have used a on scroll event listener so when I scroll down, the navbar appears black and when I go on the navbar, it disappears. But the problem is that CSS is working in nav, but not working in
active and as a result black color in active is not appearing.
const [show , handleshow]= useState(false);
const transitionNavBar = () => {
if (window.scroll > 100){
handleshow(true);
}else{
handleshow(false);
}
};
useEffect(() => {
window.addEventListener("scroll",transitionNavBar);
return () => window.removeEventListener("scroll", transitionNavBar);
}, []);
return (
<div className={`nav ${show && "active"}`}>
<div className="nav_contents">
<img className='nav_logo'
src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png"
alt=""
/>
<img className='nav_avatar' src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
alt=""
/>
</div>
</div>
)
}
.nav{
position: fixed;
top: 0;
padding: 20px;
width: 100%;
height: 30px;
z-index: 1;
}
.nav.active{
background-color: #111;
}
.nav_contents{
display: flex;
justify-content: space-between;
}
.nav_logo{
position: fixed;
top: 10px;
left: 0%;
width: 80px;
object-fit: contain;
padding-left: 20px;
cursor: pointer;
}
.nav_avatar{
position: fixed;
cursor: pointer;
right: 20px;
width: 30px;
height: 30px;
}
Instead of this
<div className={`nav ${show && "active"}`}>
Try this:
<div className={`nav ${show ? "active":""}`}>
I think you need to write your CSS in a seperate file, if you are not using styled components for example.
Write your CSS classes inside a seperate file and then import the css file inside your JSX/JS.
For example:
import "./navbar.css"
Edit: Sorry, just reread and noticed your nav is working.
As the other posts suggest, you would probably need to use a conditional operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
I don't know what was a problem but i uninstall ns install vs code again my issue was solved I really don't know how it worked but it worked.
I have created an image carousel with an active image in the middle and all the images on the side and trying to show the active image on the side by adding a border around the image.
The border is being shown initially, but I am unable to see it after clicking on other images.
ImageDisplay.js:
import React,{useState} from 'react';
import {SideBySideMagnifier} from 'react-image-magnifiers';
import '../CSS/imagedisplay.css';
function ImageDisplay({product}) {
const image = typeof(product.images) ==='object' ? product.images[0].props.src: product.images;
const [current,setCurrent] = useState(image);
const handleClick = (e) =>{
setCurrent(e.target.src);
}
return (
<div className='carousel'>
<div className='images'>
{typeof (product.images)==='object' ? product.images.map( (item,idx) =>
(
<div key={idx.toString()} className='small-images' onClick={handleClick}>
<img className={item.props.src===current ? 'selected': ' '} src= {item.props.src} alt=''/>
</div>
)
) :
( <div className='small-images'><img src={product.images} alt={product.name}/></div>)}
</div>
<div className='container'>
<SideBySideMagnifier className='magnifier' alwaysInPlace={true} imageSrc={current} imageAlt='present' largeImageSrc={current}/>
</div>
</div>
)
}
export default ImageDisplay;
CSS:
.carousel{
display:flex;
}
.images{
height:100vh;
overflow: scroll;
}
.small-images img {
width:5vw;
height:5vw;
object-fit:contain;
margin:20px 20px 20px 0;
display:block;
cursor:pointer;
}
/* .magnifier{
height: 80%;
} */
.magnifier > div {
display: flex;
height:80%;
}
.magnifier>div>img {
max-height: 500px;
max-width: 600px;
margin: 100px;
width: auto !important;
object-fit:contain; /* should be removed from inline styles */
}
.selected{
border:1px solid #F26241;
}
Can anybody help me on this?
I'm trying to do image "carousel" with horizontal scroll. Pure HTML + CSS without JS.
This is my HTML:
<div class="slideshow">
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="p" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</div>
This is my css:
.slideshow {
display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
//width: 80vw;
//margin: auto;
&::-webkit-scrollbar {
width: 350px;
height: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 500px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
&__fig {
flex: 0 0 auto;
height: 900px;
&-img{
height: 100%;
//width: 100%;
display: block;
}
}
}
1 - The problem is when I set the width of the .slideshow to 80vw, then naturally the scrollbar is shorter, but my images are cropped and not going full display width. When I try to adjust the width of the scrollbar with ::-webkit-scrollbar {width: 350px or 50vw or ...} exactly nothing happens.
I would like to have a scrollbar which is not full width of the div which I'm scrolling, but somehow can't figure it out.
2 - The other problem is I would like to have a figcaption at the bottom left side of the image. But somehow it doesn't show when the horizontal scroll is there. Any suggestions?
Here is the example how I would like to have it:
example image
edit: Now I finally managed to do it by adding:
&::-webkit-scrollbar-button:end:increment {
width: 50%;
display: block;
background: transparent;
}
But now the problem is that the scrollbar is not in middle, but on the left side. Margin:auto doesn't help. No idea how else to do it.
Also making img size 90% revealed the caption which is not that bad solution.
Now the only question is how to put the scroll bar in the centre.
Here is something close to the image you provided as an example. Sorry, but I really don't know how this can be achieved respecting the Pure HTML + CSS without JS criteria. I think it isn't possible at all.
So here, it uses jQuery and jQuery-ui draggable.
It uses a draggable div contained within its parent. Ondrag, it calculates the "scrolled" percentage to apply it to the scrollable width of the image slider.
For mobiles... I added the "touch punch" patch for jQuery-ui. More details about it here. I also placed the "initialisation code" in a function, so it can run on load AND on resize.
$(document).ready(function(){
function initDisplay(){
let slide_scrollWidth = $("#slide")[0].scrollWidth;
let customScrollbar_width = $("#sliderScroll_outer")[0].scrollWidth;
let percent = slide_scrollWidth/customScrollbar_width
$("#sliderScroll").css({"width":percent+"%", "left":0})
$("#slide")[0].scrollTo(0,0)
}
// On page load
initDisplay()
// Useful for mobile orientation change
window.onresize = initDisplay
$("#sliderScroll").draggable({
containment: "#sliderScroll_outer",
scroll: false,
drag: function(e){
let parentOffset = $(e.target).parent().offset().left
let offset = $(e.target).offset().left
let scrollableWidth = $(e.target).parent().width() - $(e.target).width()
let sliderPercent = (offset-parentOffset)/scrollableWidth
//console.log(sliderPercent)
let imageSliderWidth = $("#slide")[0].scrollWidth - $("#slide").width()
//console.log(imageSliderWidth)
$("#slide")[0].scrollTo(sliderPercent*imageSliderWidth,0)
}
});
});
#container{
margin: 1em;
}
#slide{
display: flex;
overflow: hidden;
}
#slide img{
margin: 0 0.5em;
}
#sliderScroll_outer{
width: 40vw;
background: lightgrey;
margin: 1em;
}
#sliderScroll{
width: 0vw;
height: 10px;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div id="container">
<div id="slide">
<img src="https://via.placeholder.com/800x600.png">
<img src="https://via.placeholder.com/400x600.png">
<img src="https://via.placeholder.com/1000x600.png">
</div>
<div id="sliderScroll_outer">
<div id="sliderScroll"></div>
</div>
</div>
Run in full page mode or CodePen
I have this style:
.album-photos-container {
position: relative;
display: flex;
flex-flow: wrap;
justify-content: center;
.image-card-small {
width: 48%;
margin: 4px;
filter: brightness(0.8);
img {
width: 100%;
height: 100%;
max-height: 400px;
}
}
}
This is what it looks like with images getting distorted.
I read about the display: flex; and flex-flow: wrap; and it looks this is what they do and I need some other approach maybe.
I try to set the max-height: 400px; to a higher value like 2000 then it looks like this:
Please advise: I want images to fill the box no matter how wide or tall the image is!
UPDATE
Here is the component
import React from 'react'
const ClickablePhoto = (props) => {
return (
<div onClick={props.onClick} className="image-card-small">
<img src={props.src} id={props.id} alt="album" />
</div>
)
}
export default ClickablePhoto
And I tried like this:
return (
<div onClick={props.onClick} style={{backgroundImage: 'url(' + require(`${props.src}`) + ') background-size: cover'} } >
<img src={props.src} id={props.id} alt="album" />
</div>
)
But the image src from the props looks like this: /static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.png and background-image: url cant find the image
You can't crop images with <img> element.
You could use div with background-image:
<div class="image" style="background-image: url(...); background-size: cover;" />