ow can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue } - reactjs

how can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue }also see my code and tell every step to do that i have tired margin button but it didn't work pls tell how to do pls also see the image image here
`import { Header } from "../../features/theme/Header";
import styles from "./Home.module.css";
import { useAppSelector } from "../../app/hooks";
import { Feed } from "../../features";
export function Home(): JSX.Element {
const { currentUserImage } = useAppSelector((state) => state.currentUser);
return (
<div className={styles.home}>
<Header page="Home" />
<div className={styles.tweetField}>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt="" />
</div>
<div>
<div>
</div>
</div>
</div>
<Feed />
</div>
);
}
my css code
.home{
border-right: solid 0.2px var(--border-color);
}
.homeHeader{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: solid 0.2px var(--border-color);
font-size: 1.2rem;
font-weight: bold;
}
.homeHeader button{
border: none;
background: none;
font-size: 1.3rem;
color: var(--theme-page-text);
}
.tweetField{
display: flex;
margin-top: 1rem;
border-bottom: solid 0.2px var(--border-color);
}
.userAvatar{
outline: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-left: 1rem;
background: #fff;
}
.userAvatar img{
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
background: #fff;
}
.tweetActions{
width: 100%;
margin: 1rem;
}
.tweetActions span{
font-size: 1.3rem;
color: var(--light-text-color);
}
.tweetActions div{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.tweetActions button:first-child{
border: none;
background: none;
outline: none;
color: var(--primary-color);
font-size: 1.2rem;
}
.tweetActions button:last-child{
border: none;
outline: none;
color: #fff;
background: var(--primary-color);
opacity: 0.5;
font-size: 1rem;
font-weight: bold;
padding: 0.5rem 1.2rem;
border-radius: 2rem;
}
wewaewavresrvesgrefesfvesfvesfrervesrservesrves

Related

how can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue }

how can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue } [image here][1] also see my code and tell every step to do that i have tired margin button but it didn't work
`import { Header } from "../../features/theme/Header";
import styles from "./Home.module.css";
import { useAppSelector } from "../../app/hooks";
import { Feed } from "../../features";
export function Home(): JSX.Element {
const { currentUserImage } = useAppSelector((state) => state.currentUser);
return (
<div className={styles.home}>
<Header page="Home" />
<div className={styles.tweetField}>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt="" />
</div>
<div>
<div>
</div>
</div>
</div>
<Feed />
</div>
);
}
my css code
.home{
border-right: solid 0.2px var(--border-color);
}
.homeHeader{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: solid 0.2px var(--border-color);
font-size: 1.2rem;
font-weight: bold;
}
.homeHeader button{
border: none;
background: none;
font-size: 1.3rem;
color: var(--theme-page-text);
}
.tweetField{
display: flex;
margin-top: 1rem;
border-bottom: solid 0.2px var(--border-color);
}
.userAvatar{
outline: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-left: 1rem;
background: #fff;
}
.userAvatar img{
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
background: #fff;
}
.tweetActions{
width: 100%;
margin: 1rem;
}
.tweetActions span{
font-size: 1.3rem;
color: var(--light-text-color);
}
.tweetActions div{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.tweetActions button:first-child{
border: none;
background: none;
outline: none;
color: var(--primary-color);
font-size: 1.2rem;
}
.tweetActions button:last-child{
border: none;
outline: none;
color: #fff;
background: var(--primary-color);
opacity: 0.5;
font-size: 1rem;
font-weight: bold;
padding: 0.5rem 1.2rem;
border-radius: 2rem;
}
image here =
[1]: https://i.stack.imgur.com/JpZKd.png

Use button to move to next scroll-snap

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>

Sidebar elements pushed outside the sidebar when padding added

Note: becasue I am a new user, I cannot embed photos yet. The photos are in links generated by Stack overflow below.
The below is the design I am trying to achieve,
However, the below is currently what is happening
As you can see, the sidebar list is appearing to go outside the sidebar itself when the padding is added.
How can I manipulate my CSS to alter?
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 250px;
background-color: white;
border-right: 1px solid;
padding-left: 15px;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
border-right: 1px solid;
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
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
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 40px;
padding-top: 25px;
}

React App Some CSS Properties Gets Ignored

There's a weird bug in my application to causes some CSS properties to disappear. When I sign-in into my application, I used <Redirect to="/home"/> to go to my home page. And then some images disappear and some button are half the size they suppose to be. When I refresh the browser, page gets back to what it supposes to be. I'm using styled component mainly, and below are some pictures:
after signin, wrong version
after refresh page, correct version
here is the complete codehttps://github.com/aojiaooo/shopaholic-react-app
To run the code, you have to change SignIn.js function below:
async function loginUser(credentials) {
return "someRandomCookieOfYourChoice";
//below was the original request to backend
/**
return await axios.post('http://localhost:8080/signin', credentials)
.then(response => response.data.code === 0 ? response.data.data.value : null);
*/
}
Have being frustrated the whole day ... Any help would be greatly appreciated. I'm a backend guy and this is my first day trying out React. Thanks in advance!
import styled from "styled-components";
import { Link } from "react-router-dom";
//general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu, .close{
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px){
ul{
position: fixed;
top:0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu, .close{
display: block;
}
.close{
position: relative;
}
ul.toggle{
left: 0;
}
}
`
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover{
color: darkgray;
}
ul li a{
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li{
list-style: none;
display: inline-block;
}
`
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a{
text-decoration: none;
color: #333;
}
a:hover{
color: darkblue;
}
`
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI',serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI',serif;
letter-spacing: 1px;
`
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`
I am not sure, but you may try this...
import styled from 'styled-components';
import { Link } from 'react-router-dom';
// general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`;
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu,
.close {
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px) {
ul {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu,
.close {
display: block;
}
.close {
position: relative;
}
ul.toggle {
left: 0;
}
}
`;
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`;
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover {
color: darkgray;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li {
list-style: none;
display: inline-block;
}
`;
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`;
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`;
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a {
text-decoration: none;
color: #333;
}
a:hover {
color: darkblue;
}
`;
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`;
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`;
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI', serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`;
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`;
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`;
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI', serif;
letter-spacing: 1px;
`;
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`;
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`;
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`;
Im not sure if this work with styled component!! The use of the !important on the style that is being ignored, or overridden in react. In normal css i will do it this way:
.selector{
background-color: red !important;
}
You can try this:
export const DetailButtonWrapper = styled.button`
background: #333 !important ;
`;
Im not certain about this answer but yiu can try it. !important on the style which are not applying
It turns out this problem happens when running the app using
npm start
however, the css issue goes away when doing npm run build and then serve -s build
I guess production wise this is not a bug but rather something wrong with the development environment, in case any one in the future has this problem, one can try build the project and see if the error goes away.

reactjs hover in style conmpnent: drop-down menu

const DropUl = styled.ul`
width:138px;
height:124px;
margin:0px;
padding:0px;
background: #FFFFFF;
border: 2px solid #169DA8;
box-sizing: border-box;
border-radius: 4px;
position: absolute;
top:55px;
**display:none;
&:hover{
display:block;
}**
`
const DropLi = styled.li`
display:block;
width:106px;
height:36px;
position: relative;
top:10px;
left:20px;
`
const DropAncor = styled.a`
text-decoration:none;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
color: #111111;
<Li parametarWith={'58px'} ><Ancor href="#"> <h5>Saveti</h5></Ancor>
<DropUl>
<DropLi><DropAncor href="#">Cesto pitanje</DropAncor></DropLi>
<DropLi><DropAncor href="#">Veterinar</DropAncor></DropLi>
<DropLi><DropAncor href="#">Iskustva</DropAncor></DropLi>
</DropUl>
</Li>
Qestion:
I what to make dropm-down menu in style component on ul element when it is
hover to display block drop menu
When i hover on this example nothing happens i use &:hover but it is not working
You can do something like this:
const DropLi = styled.li`
display: none;
width: 106px;
height: 36px;
position: relative;
top: 10px;
left: 20px;
`
const DropUl = styled.ul`
width:138px;
height:124px;
margin:0px;
padding:0px;
background: #FFFFFF;
border: 2px solid #169DA8;
box-sizing: border-box;
border-radius: 4px;
position: absolute;
top:55px;
&:hover ${DropLi} {
display: block;
}
`
See the Doc for more information!

Resources