Comments (6)
NoHara42
commented on May 30, 2024
1
I didn't realise there were actually only two possible states and thought it scaled gradually.
Thanks again for the help! Works perfectly now
from react-vertical-timeline.
stephane-monnot
commented on May 30, 2024
Hi,
Can you send the css code for flag-size element ? Or provide a full example ?
Maybe, you can try :
.vertical-timeline--two-columns .vertical-timeline-element-icon img {
width: 20px;
height: 20px;
}
@media only screen and (min-width: 1170px) {
.vertical-timeline--two-columns .vertical-timeline-element-icon img {
width: 50px;
height: 50px;
}
}For the timeline color :
/* The line */
.vertical-timeline::before {
background: #003b5c;
}
/* Icon container's border */
.vertical-timeline-element-icon {
box-shadow: 0 0 0 4px #003b5c, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}from react-vertical-timeline.
NoHara42
commented on May 30, 2024
Hi Stephane,
full example at https://nohara42.github.io/
Where should I change the css files? Should I rewrite them in my local
App.css? I saw them in the source code but am unable to locate them in the
npm package folder.
Thanks!
----------------------------------------------
*Ned O'Hara*
Student of Digital Humanities B.Sc /
Junior Developer eCommeleon /
Freelancer in Translation-Proofreading ENG/DE + Digital Solutions + Web
Design
*Phone: *+4915257013680
*Email: *[email protected]
*LinkedIn:* Click here.
<https://www.linkedin.com/in/ned-o-hara-b5840b127/>
…On Wed, 15 Apr 2020 at 20:16, Stéphane Monnot ***@***.***> wrote:
Hi,
Can you send the css code for flag-size element ? Or provide a full
example ?
Maybe, you can try :
.vertical-timeline--two-columns .vertical-timeline-element-icon img {
width: 20px;
height: 20px;
}
@media only screen and (min-width: 1170px) {
.vertical-timeline--two-columns .vertical-timeline-element-icon img {
width: 50px;
height: 50px;
}
}
For the timeline color :
/* The line */.vertical-timeline::before {
background: #003b5c;
}
/* Icon container's border */.vertical-timeline-element-icon {
box-shadow: 0 0 0 4px #003b5c, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#52 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKL3KSSZPJKA73S64DZ4FK3RMX2ZHANCNFSM4MIYXXSQ>
.
from react-vertical-timeline.
stephane-monnot
commented on May 30, 2024
Yes,you should rewrite in your own css.
But be careful if you load App.css before this package's css file. If so, you should use !important in your css instructions.
For icons size, Did you try :
.flag-size {
width: 100%;
height: 100%;
}from react-vertical-timeline.
NoHara42
commented on May 30, 2024
Brilliant, thanks for the help!
I tried that, but it didn't work when I changed the screen size.
I see you used icons rather than images in your portfolio, which makes
sense.
Is there a way I can mask an image over the round element in the center?
I hoped the circles were their own flexboxes/grids, but I can't seem to
align/justify-self here.
Thanks again for your help.
-Ned
…On Wed, 15 Apr 2020 at 20:36, Stéphane Monnot ***@***.***> wrote:
Yes,you should rewrite in your own css.
But be careful if you load App.css before this package's css file. If so,
you should use !important in your css instructions.
Did you try ? :
.flag-size {
width: 100%;
height: 100%;
}
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#52 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKL3KSRM4WEGWJWT2CZUCVDRMX5EJANCNFSM4MIYXXSQ>
.
from react-vertical-timeline.
stephane-monnot
commented on May 30, 2024
Maybe you should set the flag icon size to 40px on mobile version and 60px on wide screen.
.vertical-timeline--two-columns .vertical-timeline-element-icon .flag-size {
width: 40px;
height: 40px;
}
@media only screen and (min-width: 1170px) {
.vertical-timeline--two-columns .vertical-timeline-element-icon .flag-size {
width: 60px;
height: 60px;
}
}You also can change style on .vertical-timeline-element-icon in your own css.
from react-vertical-timeline.
Related Issues (20)
- How to modify style.min.css for custom styling
- enhancement: Ability to add custom breakpoints
- How to remove vertical line and icons HOT 1
- Can't find a way to remove connector below last item HOT 1
- change lineColor for tailwind dark mode HOT 2
- The white line not showing on the first render in NextJS 13 HOT 3
- No props for icon box shadow
- TypeError: Cannot read properties of undefined (reading 'prototype') HOT 3
- Animation Issue in Timeline when Loading More Items HOT 5
- In Next js 13.5 react-vertical-timeline not working HOT 35
- Typescript Error HOT 8
- [QUESTION] does react-vertical-timeline support live feed, out of the box? HOT 1
- Receiving warning: extra attributes from the server: style when using component HOT 1
- How do i change the border type for the sideline??
- Does the react-vertical-timeline-component doesn't work in latest next.js? HOT 17
- Have the 2 columns layaut also in mobile HOT 1
- VerticalTimelineElement doesn't properly center all icon elements HOT 4
- "Unable to resolve dependency tree" HOT 1
- how to customize width of the element HOT 1
- não funciona
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vertical-timeline.