A scroll bar keeps showing next to my div in all of my project, I have tried to implement and overflow: hidden to its parent but it did not work. I have this problem in other parts of my project also.
import React from 'react'
import "./ContactMe.scss"
export default function ContactMe() {
return (
<div className='contactMe' id='contactMe'>
<div className="left"></div>
<div className="information">
<div className="wrapper">
<h1>Let's discuss your Project!</h1>
<h2>Phone</h2>
<h2>email</h2>
</div></div>
<div className="form">.</div>
</div>
)
}
#import "../../global.scss";
.contactMe{
display: flex;
justify-content: center;
align-items: center;
.left{
position: relative;
left: 0;
width: 2rem;
height: 100%;
background-color: $text;
}
.information{
display: flex;
align-items: center;
justify-content: center;
flex: 0.4;
.wrapper{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 2rem;
h1{
font-size: 5rem;
}
h2{
}
}
}
.form{
flex: 0.6;
background-color: brown;
}
}
Related
I am creating an image slider in React. I'm using Material UI arrow icons as the left and right buttons.
Everything is working fine until I try and add padding.
Before adding the padding, I can see two white circles with my arrows. As soon as I add the padding, the white circles get bigger but the arrows inside disappear.
return (
<div className="container">
<div
className="slider"
style={{ transform: `translateX(-${currentSlide * 100}vw)` }}
>
<img src={images[0]} alt="" />
<img src={images[1]} alt="" />
<img src={images[2]} alt="" />
<img src={images[3]} alt="" />
</div>
<div className="arrows">
<KeyboardArrowLeftOutlinedIcon className="arrow" onClick={prevSlide} />
<KeyboardArrowRightOutlinedIcon className="arrow" onClick={nextSlide} />
</div>
</div>
)
And this is the sass file:
.container {
width: 100vw;
height: 60vh;
overflow: hidden;
position: relative;
.slider {
width: 400vw;
height: 100%;
display: flex;
transition: all 1s ease;
img {
width: 100vw;
height: 100%;
object-fit: cover;
}
}
.arrows {
position: absolute;
height: 100%;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 80%;
top: 0;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
padding: 1em;
}
}
}
It seems that a possible solution could be wrap the arrow icons with div, and style the wrapper.
Minimized demo of below example on: stackblitz (without functionality, and uses plain CSS)
Example:
<div className="arrows">
<div className="arrow">
<KeyboardArrowLeftOutlinedIcon />
</div>
<div className="arrow">
<KeyboardArrowRightOutlinedIcon />
</div>
</div>
Also some changes in Sass would be needed to match it, such as:
.arrows {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
margin: 0.75em;
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
}
}
So, I was doing a react project "Amazon Clone". But I was struck here, I want to have mexican and american pizza in same row with no space left and both of them occupy same width. Please dont recommend to do width:50%, because in the consecutive rows I have 3 items in that row where each one occupies 33% of width. How do I do this?
Home.js
</div>
<div className="home_row">
<Product title="Mexican Pizza" rating={3} image="https://m.media-amazon.com/images/I/61ZjaqqnocS._AC_SY200_.jpg" price="100"/>
<Product title="Mexican Pizza" rating={2} image="https://m.media-amazon.com/images/I/51ZBqKhH4nL._AC_SY200_.jpg" price="60"/>
<Product title="Mexican Pizza" rating={4}image="https://m.media-amazon.com/images/I/71Zf9uUp+GL._AC_SY200_.jpg" price="60"/>
</div>
<div className="home_row">
<Product title="Yonex Nanoray" rating={3}image="https://images-eu.ssl-images-amazon.com/images/I/71WtW9tk4ZL._AC_UL160_SR160,160_.jpg" price="60"/>
</div>
</div>
Home.css
body{
background-color: #eaeded;
}
.homebanner{
width: 100%;
}
.home{
margin-left: auto!important;
margin-right: auto;
max-width: 100%;
}
.home_row{
display: flex;
flex-wrap:row wrap;
justify-content: center;
width: 100%;
margin: auto;
z-index: 1;
margin-left: auto;
margin-right: auto;
}
Product.js
{title}
${price}
</div>
<div className="product_rating">
{Array((rating)).fill().map((_,i)=>(
<p>⭐</p>)
)}
</div>
<img src={image} alt="" />
<Button className='addbtn' variant="contained">Add to Cart</Button>
</div>
Product.css
.product {
display: flex;
flex-direction: column;
background-color: white;
z-index: 1;
align-items: center;
margin: 10px;
padding: 30px;
border: 5px solid white;
}
.product_info {
width: 100%;
}
.product>img {
max-height: 200px;
object-fit: contain;
margin-bottom: 15px;
}
.product_rating {
margin-top: -25px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.addbtn {
background-color: #ffc73b !important;
color: black !important;
font-family: 'Amazon Ember', sans-serif;
}
.addbtn:hover {
background-color: #ffc73b !important;
color: black !important;
}
I have a next button in the sliding animation here. I want users to move to the next slide on clicking the next button and it ends on the last slide.
I'm quite new to programming so i tried the below approach to move to a specific div id but not working
<a href={"#slide-${i+2}"}
I'm doing this in react, but for simplicity, i have written this in simple form. Could someone help me with this.
* {
box-sizing: border-box;
}
.slider {
width: 800px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 800px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
<div class="slider">
<button>Next</button>
<div class="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>
You can use scrollIntoView by targeting the id of whatever the next slide is and have a simple state to keep track of the current id.
const App = () => {
const [current, setCurrent] = React.useState(1)
React.useEffect(() => {
if (current === 6) setCurrent(1)
document.querySelector(`#slide-${current > 5?1:current}`).scrollIntoView();
}, [current])
return (
<div className="slider">
<button onClick={() => {
setCurrent(cur=>cur+1)
}}>Next</button>
<div className="slides">
<div id="slide-1">
1
</div>
<div id="slide-2">
2
</div>
<div id="slide-3">
3
</div>
<div id="slide-4">
4
</div>
<div id="slide-5">
5
</div>
</div>
</div>
)
}
ReactDOM.render(<div><App /></div>, document.getElementById("app"));
* {
box-sizing: border-box;
}
.slider {
width: 800px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 800px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>
The Link for my image extends beyond the image itself:
There is a blank space between the edge of the image and the next element, which is a Tabs from Material UI I called TradingTabs.
This is what my code looks like:
import { Link } from "react-router-dom";
...
<div className="header">
<div className="header-left">
<Link to="/">
<img
className="header-logo"
src={logo}
alt=""
/>
</Link>
<TradingTabs />
</div>
<div className="header-middle">
...
.header{
display: flex;
width: 100%;
align-items: center;
height: 60px;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
background-color: white;
border-bottom: 1px solid lightgray;
}
.header-left{
margin-left: 2%;
display: flex;
width: 500px;
align-items: center;
}
.header-logo{
width: 30%;
}
How can I fix it so the Link only wraps the actual size of the image?
I have a pretty basic flex setup and, for whatever reason, the div in question won't vertically center inside its parent tag. You can see the isolated test case below.
.likeness-rank-table {
border-radius: 3px;
margin-bottom: 20px;
display: block;
}
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%;
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
display: inline-block;
float: left;
width: 20%;
margin-bottom: 5px;
}
.draggable-tag {
text-align: center;
padding: 0 15px;
box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
position: relative;
padding: 10px 0;
background-color: #63b3ce;
color: #fff;
}
<div class="likeness-rank-table">
<div class="likeness-rank-table-body">
<div class="col">
<div class="col-inner droppable">
<div class="draggable-tag ui-draggable">
<div class="draggable-tag-inner">
This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codepen to see it:
http://codepen.io/trevorhinesley/pen/grQKPO
There are certain flex properties that are applicable only on flex items, while others are only applicable on flex containers.
The align-items and justify-content properties apply only to flex containers. Yet, you are using them on a flex item...
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
... so they are being ignored.
You need to add display: flex to the rule above. That will get align-items: center to work.
However, justify-content: center will continue to fail because the parent has a max-width: 20% limiting horizontal movement.
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%; /* limits horizontal centering of child element */
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
So, apply the horizontal centering to the parent another level up.
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
justify-content: center; /* new */
}
Revised Codepen
Here's a useful list of flex properties broken down by parent and child: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to #include flex on your col-inner (line 40 of your scss), as align-items and justify-content only work on the flexbox element (see this handy guide).
Then to align the .col element within the big white box you can add justify-content: center to .likeness-rank-table-body on line 47 of your scss.