Which CSS framework to use to modify existing dynamic HTML code?

[Pygmalion]

I have programmed a dynamic web page using Flask. The result is practically pure HTML and in terms of use design and general layout I am very satisfied with the result. But it adapts very badly to different devices and is really corny in terms of visual design, as you can see yourself:

So what I wanted is to add some designer’s touch and device adaptation, with as little code adaptation as possible. I might figure which CSS commands to use, but I have zero aesthetic sense. I have made extensive search in Internet and I figured out that maybe the solution would be to employ CSS framework. I have tested two currently (allegedly) most popular frameworks and here is what I concluded:

• Bootstrap. When I tried to implement it, the result was even worse than pure HTML. For example, lines around FIELDSETs are ugly, do not make full boxes etc.
• Bulma. This one does not even have FIELDSET and I just don’t know which kind of DIVs to employ instead to get something nice and meaningful.

I lost hours trying to get a good result, but this was all disappointing, probably worse than pure HTML.

What am I doing wrong? Should I give up CSS frameworks and use something else? Or maybe I should chose some other CSS framework, possibly one very well integrated with pure HTML and lightweight?

Please advise.

By the way, here is the code:

I can also post code if someone tells me how to do it.

[Author]

Posts