CSS
Solution:
This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.
Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.
<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>
Taggings:
Responsive layout
Different devices have different screen space, on smartphones a vertical layout might be advantageous over a horizontal. How can we create a responsive layout that automatically determines the screen width and adapts content accordingly, without messing around with media queries and having to customize the layout for each browser?
Taggings:
While constant monitoring and optimizing of the code is always a good idea, there is also a process called “Minification” to do so. During a project for a university course I had to use the service minifier.org to reduce the file size of my js- and css-files. It reduces unnecessary text, like comments or whitespaces from those files and even optimizes Javascript code according to common programming optimization patterns.
Taggings:
Reducing load times and size of scripts and CSS-files
Web services that include a lot of scripts or costly style operations may be very slow, as a lot must be loaded in the background. Is there a way to make these pages load faster?
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.
Taggings:
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.
Taggings:
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.
Taggings:
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.
Taggings:
