Hello,
I’m practising and playing with the code and I recreate this painting of Rothko with different links for each colour’s square.
The problem starts when I check the result on the mobile screen and the painting is all stretched vertically and the proportion of each colour’s squares are fucked up…can anyone pls explain to me how to avoid this? i try to google it but with no particular success…
Thank you!
The issue is that most of the widths you are using are vw, or viewport widths. As the width resizes, so will those elements. However, the frame is fixed to a certain height.
Try using aspect-ratio: aspect-ratio | CSS-Tricks - CSS-Tricks [<- Link]
It can lock the height and width to be proportional to one another when re-sizing. Then using tactics such as settings the width to 100%, and then settings the max width to 500px. The height should follow the aspect-ratio.
so you mean that should I apply the aspect -ratio to the body element and then add the value of max-width?
Btw thank you for the trick!
It might be simpler in the end to make this a picture and use that on the HTML instead, unless the CSS art is the goal. Use snippet tool, upload to imgur, right click on the image, open in new tab, use that link.
It isn’t as simple as just adding the aspect ratio, since most of the widths used for the children elements (orange, purple, etc) are all hardcoded with min and max widths.
This is also complicated by the HTML structure. It seems to have many of the elements inside of each other that make responsiveness more complicated. Making a responsive painting requires odd HTML structures because (along with anchors being thrown in), items need to be responsive but they aren’t allowed to move.
- The orange element could just be replaced with changing the background-color of the frame to orange.
- Add target="_blank" to the anchor tags
- Various elements, such as
.orangebox, contain flex properties in the css without containing any elements - Section has no styling, should just use a custom div at that point.
I would suggest researching CSS art tutorials. You seem to be going down the harder route rather then using built in CSS tools such as SVG that make drawing easier.
The linked is a example of just one of the SVG tools used to draw a detailed circle with fading and such. People have made automatic programs that convert drawings to SVG code. I would suggest looking up CSS SVG art tutorials. CSS Art is its own part of web development entirely, so be prepared for the learning curve.
For example: https://editor.method.ac/
Draw, then hit view → Source for the CSS Code.
It’s only 2 weeks since I start coding and I am doing these little exercises to learn to use better what I’ve learned, this explain also why my code is a bit weird 
and any advice is more than welcome! I will try to apply your suggestions to improve!
Thank you very much
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.