Question and Issue: Icon Prop not resizing correctly

[NoHara42]

Hi, thanks for building this - it's saving me a lot of time while I build my portfolio.

I have both an issue and a question:

Issue: I'm passing an image tag through the icon property listed in the documentation. It doesn't seem to resize responsively. What css do I need to apply to the image for it to resize properly?

Question: How do I change the color of the timeline line?

Thanks.

Icon prop code is below:

            <VerticalTimelineElement
              className="vertical-timeline-element--work"
              contentStyle={{ background: '#013535', color: '#fff' }}
              contentArrowStyle={{ borderRight: '7px solid  #013535' }}
              date="2017 - Current"
              iconStyle={{ background: '#013535', color: '#fff' }}
              icon={<img class="flag-size" src={deflag}></img>}
            >

            </VerticalTimelineElement> 

[stephane-monnot]

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);
}

[NoHara42]

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: mailned42@gmail.com LinkedIn: Click here. https://www.linkedin.com/in/ned-o-hara-b5840b127/

On Wed, 15 Apr 2020 at 20:16, Stéphane Monnot notifications@github.com 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 https://github.com/stephane-monnot/react-vertical-timeline/issues/52#issuecomment-614198432, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKL3KSSZPJKA73S64DZ4FK3RMX2ZHANCNFSM4MIYXXSQ .

[stephane-monnot]

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%;
}

[NoHara42]

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 notifications@github.com 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 https://github.com/stephane-monnot/react-vertical-timeline/issues/52#issuecomment-614208501, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKL3KSRM4WEGWJWT2CZUCVDRMX5EJANCNFSM4MIYXXSQ .

[stephane-monnot]

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.

[NoHara42]

I didn't realise there were actually only two possible states and thought it scaled gradually. Thanks again for the help! Works perfectly now