Simple illustration

HTML & CSS
#1

Hi guys thanks to all the help I have received here earlier I have been able to create this simple illustration. I was hoping to get some help to get it become more responsive and maybe clean up the code.

I struggle with these problems bellow:

  1. An svg is written by js for the curved arrows and I wonder if this code can be simplified (please see js in the pen) ?
    2. The Title element h4 is not centered correctly.
  2. Is it possible to make this illustration more responsive?

Here is a pen of the project:

https://codepen.io/frederik84/pen/aXWrxz

Frederik.

#2

The first step is to visualise how you want it to look on smaller screens.
For example you may want the flow going vertically down the screen with the labels to the side.
Once you know how it will look work can begin.

#3

What you are suggesting is actually what I had in mind :slight_smile:

It might work horizontally on smaller screens also, but I think vertically might be better . I had some problems with the media query on this one IĀ“m sure I must have done some small mistake but nothing seams to workā€¦ :confused:

#4

I added some media queries , but had to add everything as important., maybe im doing something wrong ?

#5

Do something like this if you want to keep it horizontal (just a basic idea).

@media screen and (max-width: 980px) {
  .js-illustration {
    max-width: 500px;
  }
  .illustration-logo {
    width: 80px;
    height: 80px;
    top: -40px;
    line-height: 80px;
  }
  .svg-inline--fa {
    font-size: 30px;
  }
  .illustration__text {
    top: -140px;
  }
}

@media screen and (max-width: 600px) {
  .js-illustration {
    max-width: 300px;
  }
  .illustration-logo {
    width: 60px;
    height: 60px;
    top: -30px;
    line-height: 60px;
  }
  .svg-inline--fa {
    font-size: 24px;
  }
  .illustration__text {
    top: -36px;
  }
  .arrow-1,
  .arrow-2,
  .arrow-3 {
    display: none;
  }
  .illustration__logo-1 p,
  .illustration__logo-2 p,
  .illustration__logo-3 p {
    position: absolute;
    top: -60px;
    right: 0;
    left: 0;
    transform: none;
    text-align: center;
  }
}

This will give you this display at smaller screens.

freder-progress

You can tweak font-sizes and positions etc to your hearts content but I would lose the arrows and transforms on the smaller screen as in my demo but you could put them back if you wanted but change their positions.

Itā€™s all a bit magic numberish but thatā€™s a limitation of the way you designed it. I would have tried for a more natural alignment without positioning everything,

You are still using position:relative incorrectly but I havenā€™t addressed that issue as you used it too many times for a simple fix. You will have gaps all over the place because of it.

If you want vertical steps for smaller screens then you may get inspiration from this old pen of mine.

https://codepen.io/paulobrien/pen/dOwQoY

#6

I had a few minutes so I removed all the relative positioning to get a more logical approach.:slight_smile:

https://codepen.io/paulobrien/full/GzEgaJ

It can be fine-tuned as required but is a lot more usable than the previous version.

#7

Hi thanks for this :slight_smile: I just came in and nice to see this . I really appreciate the cleanup you have made
IĀ“m a bit unsure now as to have it like this for mobile device or going for vertical setup ā€¦ I guess both options are valid. what did you think of my class names , does it look ok ?

#8

You can turn it around quite easily for small screens.

https://codepen.io/paulobrien/pen/GzEpBB

(Just tweak to suit)

They seem ok but I think ā€˜progress stepsā€™ would have been a better name as ā€˜illustrationā€™ is a bit too generic.

Also I would have been inclined to add a class to the p tag instead of this.

.illustration-logo p {}

Itā€™s probably ok in that controlled environment but if at a later date you added another p tag in each block then it would be styled when you may not have wanted it.

I would have added a class to the p tag like you did with the h4 and avoid descendant selectors. Itā€™s not a big issue and chances are you wonā€™t change that section so it should be fine.

Try to avoid repeating styles and most of those p elements could have been styled in one go and then you just style the differences.

e.g.Like I did above.

.illustration-logo p {
  position: absolute;
  color: #000;
  font-family: "Shadows Into Light";
  font-size: 18px;
  font-weight: 600;
  animation: fadeIn 1.5s both 2.5s;
  white-space: nowrap;
}
.illustration__logo-1 p {
  top: 3rem;
  left: -5.5rem;
  transform: rotate(10deg);
  animation-delay: 2.5s;
}

etc...
#9

Once I saw your Pen I also thought that would be better , thanks for your tips and suggestion.

#10

Yes the vertical version looks nice. I think I might go for this.

There Is one more problem with this -> I have a JS code that triggers when scrolled down to the ā€œjs-illustrationā€ element. And this works fine in full screen view when the ā€œjs-illustrationā€ is hidden and a animation is fired to revel it however for some reason this breaks the media queries for this project. Im not sure what is going on here ??

#11

Iā€™d need to see a demo to work out whatā€™s happening. Do you have an example?

Unfortunately I wonā€™t be back until tomorrow afternoon now.

#12

[quote=ā€œPaulOB, post:11, topic:319437ā€]
Unfortunately I wonā€™t be back until tomorrow afternoon now.
[/quote

ThatĀ“s ok take your time , you already helped me greatly.

I will update the pen shortly

https://codepen.io/frederik84/pen/aXWrxz

But for some reason I cant get the jquery script to load

#13

Link to jQuery via the codepen settings or the script panel will run before jQuery has loaded.

2 Likes
#14

I tried adding this but no luck :confused:

#15

I moved the two script sources and the css link to the css and javascript settings (the fields at the bottom), but then I also commented out the visibility:hidden on the .js-illustration container.

It then worked. And mainly also with the javascript panel totally commented out so the arrows didnā€™t show. :slight_smile:

#16

Hi thanks for looking into this.

When I was going to read this I opened the your post on my phone and the pen played correctly with all animations on my phone. I guess on big monitors there are no scroll events since this project has no vertical scroll in the Pen.

Also I think the original CSS files had so many errors but after PaulĀ“s edits this animation does indeed work like intended.

:slight_smile:

2 Likes
#17

Is it all working now?

#18

yes sorry for post #10 I did not realize you edits to the css fixed this problem. Only fine tuning left now :=) As usual your overhaul of the code have been superb :slight_smile: great work PaulOB. much appreciated

1 Like
#19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.