CSS

CSS Styling a button does not yield the desired outcome

When trying to incorporate a new page into an existing website with corporate styling, I came to a problem which was hard to detect (for me). A newly created button should have a slightly different position and edge rounding than all other styled buttons as it comes from a different context. Whatever I've done, I never got the correct styling, like magically ignored by the browser. Learning about the developer console I digged deep into the css styling and found out that a <div> from a container forced its own styling on the button. Some changes work whereas some changes are ignored because they are overwritten by the super div. A very hacky and in general practice bad way to solve this problem was to apply the `!important` tag which then really applied the changes. Reading through some articles, my use case was actually well suited for the `!important` tag because it really stands out in the context.

Speed up webpage testing time

Testing web pages can be really time consuming. Every CSS, HTML or image change needs a browser refresh. It would be way better if the reloads could be avoided.

Firstly I made the root div fit the screen by giving it the attribute "height: 100vh;". I then used flexbox to make the root div show the items in a colum by adding "display: flex; flex-direction:column;". The last thing I added was "flex: 1;" to the content div which is equivalent to "flex: 1 1 0;" This means "flex-grow : 1; flex-shrink : 1; flex-basis : 0;". Grow and shrink make the div grow and shrink in same proportion as the window-size. Basis makes the div take up screen as per the screen size available. For example if there are 4 divs with this they will all take up 25% of the available space.

Trying to fit the screen in CSS

In a web application I am developing, I had a CSS design problem. I had a title bar on top and underneath I had the content. I needed to get the content to spread itself to fit the whole screen instead of squeezing itself to the top.
Subscribe to CSS