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;
}
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.^-^
My nav bar is showing up overlapped with bullet points and 'HiOutlineMenuAlt4' icon is not appearing either. I am not sure what to do, I can't identify where the issue actually lies? Is it in the css?
Navbar.js
import React from 'react'
import {BiSearch} from 'react-icons/bi'
import {BsPerson} from 'react-icons/bs'
import {HiOutlineMenuAlt4} from 'react-icons/hi'
import './NavbarStyles.css'
function Navbar() {
return (
<div className='navbar'>
<div className='logo'>
<h2>BEACHES. </h2>
</div>
<ul className='nav-menu'>
<li>Home</li>
<li>Destinations</li>
<li>Travel</li>
<li>Book</li>
<li>Views</li>
</ul>
<div className='nav-icons'>
<BiSearch className='icon'/>
<BsPerson className='icon'/>
</div>
<div className='hamburger'>
< className='icon' />
</div>
</div>
)
}
export default Navbar
NavbarStyles.css
.navbar{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
z-index: 2;
}
.nav-menu {
display: flex;
}
.hamburger{
display: none;
padding: 1rem;
}
No problems are listed so hard to decipher what to do next
Hi #Steph G,
About your icons HiOutlineMenuAlt4.
You are not using the imported HiOutlineMenuAlt4 icon in the hamburger div
<div className='hamburger'>
<HiOutlineMenuAlt4 className='icon' />
</div>
And about your CSS, that code is enough.
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
How do I make background color of "-" bullet expand when I active the content.
Image 1 is what I want to do while Image 2 is what I do...
Want to be like tis
[1]
(https://i.stack.imgur.com/5NDOX.png)
My Demo
[2]
(https://i.stack.imgur.com/0ztPK.png)
My Js Code
`
const [isActive, setIsActive] = useState(false);
<div className="support">
<div className='containerFour'>
<h1>FAQ</h1>
<h1>Tell us what you're searching for</h1>
<div className="accordion">
<div className="accordionItem">
<div className="accordionTitle" onClick={() => setIsActive(!isActive)}>
<h1 className='accordionH'>What payment methods are available to complete your purchase?</h1>
<div className='accordionBullet'>{isActive ? <img src={Close} /> : <img src={Open}/>}</div>
</div>
{isActive && <div className="accordionContent">Test</div>}
</div>
</div>
</div>
</div>
`
My Css
.support .accordion {
width: 811px;
margin-left: auto;
margin-right: auto;
}
.support .accordionItem {
margin-bottom: 1.5rem;
}
.support .accordionBullet{
background-color: #205696;;
padding-top: 1rem;
}
.support .accordionTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
background-color: #D9D9D9;;
}
.support .accordionH{
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
color: #000000;
}
.support .accordionTitle:hover {
background-color: #D9D9D9;;
}
.support .accordionContent {
background-color: #D9D9D9;
}
Currently, the accordionBullet is inside the accordionTitle. Its maximum height = height of the h1 heading only.
Put accordionBullet beside accordionItem so that it can expand with its height.
<div className="accordion">
<div className="accordionItem">
... (Title + Content) ...
</div>
<div className="accordionBullet">
...
</div>
</div>
.accordion {
display: flex;
}
I have a style like this
//inside page.jsx
export function Page() {
return (
<div css={container}>
<div css={header}>
<div css={horizontal}>
<Menu
mode="horizontal"
>
<Menu.Item>
<Link href="#>
<a>Menu A</a>
</Link>
</Menu.Item>
</Menu >
</div>
</div>
</div>
)
}
//inside styles.js
export const horizontal = css`
display: none;
#media (min-width: 720px) {
display:block;
}
`
export const header= css`
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: white;
position: sticky;
top: 0;
z-index: 1;
`
When testing the browser with a size less than 720px its works as intended the content is invisible because of display none, but when the browser size is back to more than 720px it's not working at all (not going back to visible).
if I replace the Menu component with another component the style is working properly (when less than 720px = invisible and when more than 720px = visible). Also, it can work with the Menu component if removing display flex in the header style.
I'm a bit confused about what going on here.
The arrows don't display. Instead "PREV" and "NEXT" text show in their place.
I've confirmed that the swiper.css is loading. The PREV and NEXT texts are functioning correctly. Clicking them changes the images and also mobile swipe gesture functions as expected.
EDIT: codepen is here: https://codepen.io/davrosfl/pen/OJJPegm
It's strange, it works fine in codepen, but not on my local machine. Same code.
import Swiper from 'swiper';
import './Project2.css';
import 'swiper/css/swiper.css';
class Project2 extends Component {
componentDidMount() {
this.mySwiper = new Swiper('.swiper-container', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true
});
}
render() {
return (
<div className="swiper-container" ref={div => this.carouselRef = div}>
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src={`${process.env.PUBLIC_URL}/images/01.jpg`} />
</div>
<div className="swiper-slide">
<img src={`${process.env.PUBLIC_URL}/images/02.jpg`} />
</div>
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
)
}
}
export default Project2;
CSS
.swiper-container {
height: calc( (var(--vh, 1vh) * 100) - 10.75vh );
width: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
I want the navigation arrows to display instead of "PREV" and "NEXT"
Placing text-transform: uppercase; in the style of the body tag will produce this bug. For ex:
body {
text-transform: uppercase;
}