I have two divs that are next to each other: artwork__feed and preview
When I map through my db, the images render horizontally and overflow into the preview div.
See here:
Question
How do I render all of my FeedCard components vertically so they don't overflow into my preview div?
Here is my render code:
return (
<div className="feed">
<div className="artwork__feed">
{artworks.map((artwork) => (
<FeedCard
imageUrl={artwork.imageUrl}
title={artwork.title}
artist={artwork.artist}
year={artwork.year}
/>
))}
</div>
<div className="preview">
<div className="phone"></div>
</div>
</div>
);
}
Here is my FeedCard code:
function FeedCard({
imageUrl,
title,
artist,
year,
medium,
height,
width,
category,
}) {
return (
<div className="feed__card">
<div className="feed__card__container">
<div className="feed__category">
<img src={imageUrl} className="artwork__image__feed" />
</div>
<div className="artwork__info">
<div className="artwork__title__artist">
<h1>{title}</h1>
<p>{artist}</p>
</div>
<div className="artwork__bid_button">
<button>Bid</button>
</div>
</div>
</div>
</div>
);
}
And here is my Feed.css code:
.artwork__feed {
display: flex;
align-items: center;
background-color: white;
}
probably grid is your best option:
.artwork__feed {
display: grid;
/*this will give two equal columns*/
grid-template-columns: 1fr 1fr;
align-items: center;
background-color: white;
}
Related
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
function App() {
return (
<Carousel showArrows={true}>
<div>
<img src="../assets/1.jpeg" alt="image1" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="../assets/2.jpeg" alt="image2" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="../assets/3.jpeg" alt="image3" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
export default App;
i added the css file in App component similar like react-responsive-carousel but it is not working
carousel.min.css
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
It should be working but not sure why this is happening
I don't know about this library, But I can see you are not doing something complicated with your carousel. So basically why don't you create one for yourself?
I have a base code that could help you in this matter.
I create a carousel with React and Static UI(HTML, CSS, JS).
I think it can actually help you out.
replit, codesandbox, Stackblitz
these versions are written with html css js and nothing else.
replit, codesandbox, Stackblitz
In your scenario I will do this:
const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;
let modalPage = 0;
const nextPage = () => {
modalPage++;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
const previousPage = () => {
modalPage--;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
/* you set root to define varibales */
:root {
--modal-width: 300px;
--modal-height: 400px;
--number-of-pages: 5;
}
html body{
margin: 0px;
}
.modal-background{
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.modal-boundary{
width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
overflow-x: hidden;
z-index: 10;
/* the max width must be as same as the width of modal ModalBoundary*/
#media screen and (max-width: var(--modal-width)) {
width: 100vw;
height: 100vh;
}
}
/* This container contains every slide you gonna use in your modal */
.modal-slides-container{
min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background-color: white !important;
/*here is how to control carousel movement*/
margin: 0px; /*this how we control the place of the modal*/
transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
}
.modal-slide{
width: var(--modal-width);
height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white !important;
}
.button-container{
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.navigation-button{
margin: auto;
}
<body>
<div class="modal-background">
<div class="modal-boundary">
<div class="modal-slides-container">
<div class="modal-slide">
<img alt="first image" src="https://picsum.photos/200/200" />
<p> Legend One </p>
<div class="button-container">
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="second image" src="https://picsum.photos/200/200" />
<p> Legend Two </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="third image" src="https://picsum.photos/200/200" />
<p> Legend Three </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fourth image" src="https://picsum.photos/200/200" />
<p> Legend Four </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fifth image" src="https://picsum.photos/200/200" />
<p> Legend five </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
</div>
</div>
</div>
</div>
</div>
</body>
I hope this helps you.^-^
I'm trying to do an about page and i need 3 sets of elements inside a vertical slider, so i picked swiperjs. Without the carousel, they were working just fine as far as the grid goes, but now the columns are extremely tall and the elements aren't in their correct rows. Here's how it looks on the jsx
<container className = {styles.sobreGeral}>
<div className={styles.parent}>
<Swiper
direction={"vertical"}
pagination={{clickable: true,}}
modules={[Pagination]}
>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre.jpg" alt="alt" className={styles.imagem} />
</div>
<div className={styles.div2}>
<img src="logo-sobre.jpg" alt="logo" className={styles.imagem} />
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-rita.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Rita </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-jose.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Jose </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</container>
}
and here's how the css is setup
.sobreGeral{
display: flex;
margin-top: 150px;
}
.contato{
display: flex;
justify-content: center;
}
.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
width: 100%;
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 2 / 3 / 6 / 6;
max-width: fit-content;
padding-left: 10%;
}
.div2 {
grid-area: 2 / 6 / 4 / 11;
max-width: fit-content;
}
.div3 {
grid-area: 4 / 6 / 6 / 8;
}
without the swiper, things were in their proper places, but as it is it's not working
How can I render the same component inside a map, without overlapping, but one below another
Here's what i mean:
return (
<div className='app'>
{[0, 1, 2, 3].map(element => {
return(<MyComponent props = {element}/>)
})}
</div>
)
How can I display that component in a scrollable list, considering that its height is auto?
You are Describing the Default Behavior Already
How can I display that component in a scrollable list, considering that its height is auto? [emphasis mine]
With height:auto;, the behavior you describe happens already:
.item {
height:300px;
border: 1px solid black;
}
<div class='app'>
<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
</div>
But if you wanted a Limited Scroll
You need two things:
You need to add overflow-y to be set to scroll.
You need to set the height to how much of a scrollbar you want.
.app {
height: 40px;
overflow-y: scroll;
}
.item {
height:30px;
border: 1px solid black;
}
<div class='app'>
<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
</div>
you can add the following css:
.app{
display: flex;
flex-direction: column;
gap: 2vh;
overflow-y: auto;
}
I added a footer to my page. When it is a page length it covers the content.
There should be a distance between the end of the page and the footer.
It's ok when the page is 100 percent, but it happens when the page gets longer
But I want a distance between.This is scss.
.footer {
display: flex;
background-color: #222831;
min-height: 5vh;
justify-content: space-between;
padding: 10px;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
This is my layout
import React from "react";
import Footer from "./footer";
import Header from "./header";
const Layout = ({ children }) => {
return (
<div className="layout">
<Header />
<div className="children">{children}</div>
<Footer></Footer>
</div>
);
};
export default Layout;
This is my footer
import {
AiFillLinkedin,
AiFillGithub,
AiFillInstagram,
AiOutlineMail,
} from "react-icons/ai";
export default function Footer() {
return (
<div className="footer">
<div className="logo">
<span className="bracket">{"<"}</span>
<p>Handcrafted by</p>
<span className="bracket">{"{"}</span>
<span className="name">{"ömer"}</span>
<span className="bracket">{"}"}</span>
<span className="bracket">{"/>"}</span>
</div>
<div className="icons">
<a href="https://www.linkedin.com/in/omersahin1/">
<AiFillLinkedin className="icon" size={20} />
</a>
<a href="https://github.com/1sahinomer1">
<AiFillGithub className="icon" size={20} />
</a>
<a href="https://github.com/shnomr">
<AiFillInstagram className="icon" size={20} />
</a>
<a href="mailto:1sahinomer1#gmail.com">
<AiOutlineMail className="icon" size={20} />
</a>
</div>
</div>
);
}
Thank you.
Goal: Align items centrally in div
See picture here (notice every watch is shifted to the left):
I'm trying to render each item in productcard centrally.
Currenty, each productCard__container renders to left.
Here is my ProductCard.js code:
return (
<div className="productcard">
<button onClick={(e) => history.push(`/product/${id}`)}>
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>${price}</p>
</div>
</button>
</div>
...and the CSS code:
.productcard {
margin: 10px;
border-radius: 12px;
background-color: black;
}
.productCard__container {
align-items: center;
}
You can use css flex box
.productcard {
display: flex;
justify-content: center;
}