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:
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.
Is it possible to make this illustration more responsive?
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.
What you are suggesting is actually what I had in mind
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ā¦
This will give you this display at smaller screens.
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.
Hi thanks for this 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 ?
You can turn it around quite easily for small screens.
(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...
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 ??
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.
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.
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 great work PaulOB. much appreciated