Category Archives: HTML

How to create equal height columns


<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>


.row {
    display: flex;
}
.col {
    flex: 1;
}

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id nisi risus. Maecenas eu quam tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam sed dolor sit amet orci porttitor fermentum sit amet id velit. Suspendisse consectetur ornare dictum.
Vivamus a sem mollis, bibendum ante et, tempus eros. Maecenas in rutrum libero.

SVG image isn’t displaying in Chrome browser

Chrome browser doesn’t support SVG format with <img src=””> tag anymore. Peoples are facing issues that they aren’t able to see their images in Chrome browser because the images are in SVG format.
So I found a solution to display SVG image in Chrome browser with <object> tag.


<object data="/images/yourlogo.svg" type="image/svg+xml" width="100" height="100" class="mylogo"></object>

You can apply CSS rules by defining a class on the <object> tag like shown in above example.
And you can also add width and height attributes on the <object> tag.

I hope this will resolve your problem in Google Chrome Browser.

How to center a DIV horizontally and vertically

After trying a lot of tricks I found this perfect solution to keep the element or DIV horizontally and vertically center.
This is worked for me and it’s working in all the main browsers. I’d personally recommend to use the below CSS rules. It’s very simple to apply.


.center{ 
  height: 300px;
  position: relative;
  border: 3px solid #fff000; 
}

.center div {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


<div class="center">
  <div>Lorem ipsum dolor sit amet adipiscing elit.</div>
</div>

Example:

Lorem ipsum dolor sit amet adipiscing elit.

How to increase Checkbox size in HTML/CSS

Now you can easily increase the size of the HTML checkbox. You just need to apply CSS3 properties.
Here is the CSS code to add with your CSS class or ID.


input[type="checkbox"]{
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}