CSS

How to Properly Include CSS and JS in your WordPress Themes and Plugins

Gosh, guys, I understand that this kind of beginners guide but in all my other tutorials I very often talk about including JavaScript and CSS, so since now I am able to give you a link to this tutorial. And to be honest, I didn’t find any good and fresh tutorial on this topic. Before we proceed to the guide I want you to know that you should never add external CSS and JS directly to WordPress template files like header.php, footer.php etc. In some cases it could be OK to add some internal code there using <style> and <script> tags, but also not recommended. Internal CSS and JavaScript ...

Absolute Centering in CSS

If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline elements) or margin: 0 auto; (when working with block element). But when it comes to center something both horizontally and vertically the job can be a little tricky to achieve. In this article, we’ll check out several techniques to completely center an element. You can find the complete code on codepen.io/jscodelover Using Position and Transform property .parent{ position: relative;}.child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} These properties are set on the child element. Absolute positioning bases the element’s position relative...

Difference between css position absolute versus relative

I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I decide to illustrate their differences with pictures. Before going further, we should know the default behaviour of position when we don’t specify any position property. https://leannezhang.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6

CSS Position Property Explained!

Introduction We struggle a lot while positioning elements at the right place on the webpage. Sometimes we also find that top/left/bottom/right has no effect on the element. The position property of CSS controls the positioning of elements on the webpage and its behavior. It also influences other elements of the webpage. Today, we are going to look into the position property and its different values in CSS. Position Property The position property specifies the type of positioning method used for an element.-W3Schools It defines the position of an element in the document. There are 5 major key value of position property StaticAbsoluteRelativeFixedSticky...

Responsive grid in 2 minutes with CSS Grid Layout

Are you trying to build a grid of elements? If so, you’ve probably noticed one size doesn’t fit every screen size. The modern solution is a responsive grid that changes based on the size of the screen viewing it. Many developers jump to a web design framework for their responsive grid needs. But it might not be as hard as you think to code your own. In a few lines of code, you can create something like this: Let’s start with 12 “cards”. <div class="card">ONE</div> <div class="card">TWO</div> <div class="card">THREE</div> <div class="card">FOUR</div> <div class="card">FIVE</div> <div class="card">SIX</div> <div class="card">SEVEN</div> <div class="card">EIGHT</div> <div...