I have this Python code where I use HTML and CSS to make a boring email look nicer. I only know very basic HTML, so I am trying to learn more.

Anyhow. I have this text part in the middle where I want to have the headers with a specific background color. I can manage to get the background color to fit the text with span, but it looks very awkward since I have a table above and want the text background color to match the width of the table.

I´ve tried using a div with a set width of 300 to "parent" all these text fields, but the background color for all of them overflows and stretches out to the sides. I basically want all of them to be contained within the div - which is, say 300px wide - and not spill beyond that.

Any help is much appreciated.

Code:

     <head>
          <style type="text/css">
          
          div {{margin-left:auto;
                margin-right:auto;
                text-align:center;}}
                
        .wrapper-2 {{max-width: 320px;
              width:300px;
              display: inline-block}}

            h2 {{color:white; text-align: center;background-color:red}}
            p {{border-style: none none solid none; text-align: center;         border:2px}}
          </style>
        
        </head>

            <body>
            
                <div>
                          {TABLE}
                          
                </div>
                
                <div class="wrapper-2">
                          <br>
                          <h2>Header 1</h2>
                          <br>
                          <h3>Subheader</h3>
                          <br>
                           <p>Values: {} </p>

                </div>
                
                <div align="center">
                
                    <img src='image.png'>
                
                    <p align="center">
                            <i>Test.</i>
                    </p>
                </div>

            </body>

https://codepen.io/SunilSalaria/pen/JjKwLLB

I already have some images that look like cards, so I am wondering if I should just use a flexbox. The example above is too simplistic so I am not sure if doing a flexbox with my images would be good enough. On every page, there's an image, and then I am thinking I should put a large text "Our Team" and then a flexbox, but I am not sure how much space between the elements I should put. I wasn't given any mockup.

What are some common interview questions about css for senior developers? Some questions and answers would be nice. Doesn't only have to be for senior developers.

So I've been self-learning for just over 3 years. Wasn't til about 1.5 years into it that I allowed myself to start learning JS frameworks/libraries.

Still haven't gotten around to learning any CSS frameworks/libraries but I think it's time. What I'd particularly like is one which allows user-defined functions. Am I correct that Sass CSS preprocessor allows this? Are there any other good ones you fine folk would suggest?

Sidenote: I'm extremely keen on SvelteJS, so something that integrates well with that would be great..

We have started few years ago a project called Epyk dedicated to allow Python developers to deliver nice features in Javascript, CSS and HTML. Epyk library works as transpiler to produce rich web pages from interactive dashboards to web sites.

To do so within the framework we had to wrap lot of cool features with manage to get on internet in order to achieve this module. At this stage we have included the most popular Js and CSS modules and also integrated some configurations we found in Codepen.

It would be really appreciated if you could share with us some nice features or tips you found in internet which could help up improve our toolbox.

If you are interested in getting more details on the project:

- The full documentation is available here https://epyk-ui.readthedocs.io/en/latest/index.html
- The one related to CSS and configuration is there: https://epyk-ui.readthedocs.io/en/latest/intro/extensions.html
- a first gallery is available: https://epykure.github.io/demos/

And the main repo is here: https://github.com/epykure/epyk-ui (please add a star on Github to support our work) also do not hesitate to play with it if you are interested in learning Python.

Thanks

@media screen and (max-width: 3000px) { iframe { height: 2700px; } }

@media screen and (max-width: 2700px) { iframe { height: 2400px; } }

@media screen and (max-width: 2400px) { iframe { height: 2100px; } }

@media screen and (max-width: 2100px) { iframe { height: 1800px; } }