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?
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;
}
}
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;
}
}
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 problem with height of my website. My component has
height: 100vh;
property but there is a moment when child component becomes really long- in that case height doesn't change and component lands somewhere below on white background. Is there any way to let main component know he has to use new height? I'm adding image to show it better.
Code sample as requested:
return (
<div className="App">
<Navbar></Navbar>
<Container id="maincontainer" maxWidth="xl" sx={{border: (theme) => `1px solid ${theme.palette.divider}`,bgcolor: 'background.paper',boxShadow: 5}}>
<div id="inputcontainer">
<StepperForm
></StepperForm>
</div>
<div id="outputcontainer">
<ThreeScene
></ThreeScene>
</div>
</Container>
</div>
);
css:
.App {
text-align: center;
background-color: rgb(177, 177, 177);
min-height: 100vh;
}
.App-header {
background-color: #000000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
width: 100%;
}
.App-link {
color: #61dafb;
}
#maincontainer {
height: 100vh;
min-height: 100vh;
overflow: auto;
}
#inputcontainer {
width: 50%;
float: left;
height: 100vh;
text-align: left !important;
box-shadow: none !important;
background-color: white !important;
min-height: 100vh;
}
#outputcontainer {
width: 50%;
float: right;
height: 100vh;
min-height: 100vh;
}
What bothers me too is that my navbar shadow is being hidden:
Why are you declaring height to 100vh every time. This makes page too big and your components rendered between them seperated by 100vh margin.dont use 100vh your page automatically set its height if you want you can do
height:'auto',
And also try to elaborate your question more. Like we can't help you in your boxShadow because we can't see the code of it, also add images that are understandable
Relatively new to React, and am wanting to recreate the design below
enter image description here
I have the base formatting down, but as you will notice, there are lines separating the logo blocks, from the login and signup blocks, with the signup and login buttons pushed to the bottom.
Below is my current code
CSS:
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 20%;
background-color: white;
border-right: 1px solid #F0F4FB;
padding-left: 15px;
box-sizing: border-box;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
box-sizing: border-box
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
padding-bottom: 15px;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.SidebarList .Login {
background-color: white;
color: #FD954E;
width: 279px;
height: 39px;
right: 1596px;
top: 958px;
border: 1px solid #FD954E;
box-sizing: border-box;
border-radius: 19.5px;
}
.SidebarList .SignUp {
width: 279px;
height: 39px;
right: 1596px;
top: 1011px;
background: #FD954E;
border-radius: 19.5px;
border: none;
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
transform: scale(1.2)
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 25px;
padding-top: 25px;
padding-bottom: 30px;
border-bottom: 1px solid #F0F4FB;
width: 55%;
}
Sidebar.js
import React from "react";
import "../App.css";
import { SidebarData } from './SidebarData'
import Logo from './Logo.svg'
function Sidebar() {
return (
<div className="Sidebar">
<div>
<img src = {Logo} alt='Logo’ className=‘Logo’ />
</div>
<ul className="SidebarList">
{SidebarData.map((val, key) => {
return (
<li
key={key}
className="row"
id={window.location.pathname == val.link ? "active" : ""}
onClick={() => {
window.location.pathname = val.link;
}}
>
<div id="icon">{val.icon}</div> <div id="title">{val.title}</div>
</li>
);
})}
</ul>
<div className= "SidebarList">
<button className="Login">
Login
</button>
</div>
<div className= "SidebarList">
<button className="SignUp">
Sign Up
</button>
</div>
</div>
);
}
export default Sidebar;
How should I structure my code in order to acheive my desired result? Ex: with the logo at the top with the seperator, the list of navigation elements, and then the login and signup buttons at the bottom with the seperator?
Currently, my sidebar looks as follows, with the seperator not full width between the logo and navigation elements, and the buttons extending beyond the sidebar.
enter image description here
It would be easier to simplify the problem with just HTML and CSS as that's much easier to troubleshoot. Part of your problem is that you are defining the width of the sidebar as a percentage of the screen width but elements within the sidebar are defined with a width in pixels. When the browser window is too small, your buttons will appear outside the full width of the sidebar. You could either code all your values as percentages or in pixels. Alternatively, you could use a mix and just set a min-width for the sidebar so that you don't end up with elements out of place.
The reason that your line break is not the full width of your sidebar is because you are defining it with the border-bottom property of the logo. Your logo is not 100% the width of the sidebar so your line break will only be the width of the logo. A better solution would be to define a div that is set to width: 100%. This way, you will have more control.
Here is a simplified solution to your sidebar problem using pixels to define the widths.
HTML:
<div class="sidebar">
<div class="header">
<div class="logo">Logo</div>
</div>
<div class="line-break" />
<div class="content">
<ul class="nav">
<li>Home</li>
<li>Blog</li>
</ul>
</div>
<div class="line-break" />
<div class="footer">
<button class="login">Login</button>
<button class="sign-up">Sign up</button>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sidebar {
width: 300px;
height: 100%;
border-right: 1px solid grey;
}
.line-break {
height: 1px;
width: 100%;
background-color: grey;
}
.header .logo {
height: 40px;
width: 200px;
background-color: grey;
margin: 20px;
}
ul.nav {
list-style-type: none;
padding: 20px 0 0 40px;
}
ul.nav li {
margin-bottom: 14px;
}
ul.nav li:last-child {
margin-bottom: 0;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}
.footer button {
padding: 6px 0;
width: 80%;
margin-bottom: 14px;
}
.footer button:last-child {
margin-bottom: 0;
}
And here is a link to a CodePen
where you can see this in action.