mobile menu trigger, icon

Tag: CSS


Background image size (full-width, responsive, full-screen, etc)

In this post, I will show you a couple of examples based on the background-size property. After reading it, you’ll learn how to make a full-width background image, how to make it responsive for all devices, full-screen background on any screen, custom size, etc. Before you start, you can also check the live demo of the finished examples that you’re going to build. You’ll get all the code samples and all the source code that powers the live preview template. Let’s get started. Examples of background image size Throughout the examples, I am only using plain text/paragraphs but you can […]

Read More →

How to center align text vertically?

The text-align: center can make any text horizontally centered. But if you need to make the text vertically centered, you have to do it differently. In this post, I will show you how to center-align text vertically. Also, I will give you multiple examples & use cases. After reading this post, you’ll be able to vertically center align text from various directions. Last but not least, you’ll get all the code samples and GitHub repo. Before you dive in, check the live previews of the finished products that you’re going to build. Let’s get started. Examples of vertically center-aligned text […]

Read More →

How to hide the scrollbar using CSS?

CSS

In this post, aside from hiding the scrollbar, I will also show you a couple of related things. You can check the topics in the table of contents. How to make the scrollbar hidden? You can make the scrollbar hidden using the overflow property. See the CSS below. CSS The above CSS will hide the scrollbars (both vertical & horizontal). See everything in action How to hide the horizontal scrollbar? To hide the horizontal scrollbar, you need to deal with overflow in the x-axis (horizontal direction). See the CSS below. CSS How to hide the vertical scrollbar? The following (below) […]

Read More →

How to use SASS/SCSS in VSCode and its difference from regular CSS?

How to use SASS in VSCode

SASS is a tool that allows you to write & organize CSS more precisely & very easily. And SCSS is an extension of SASS. For example- style.scss, _header.scss, _footer.scss, and so on and so forth. On the other hand, CSS refers to ‘Cascading Style Sheets‘ that are executable by web browsers. Note: CSS is not a programming language, it’s a stylesheet language. In this post, I will show you how you can configure (set up) your VSCode editor for using SASS/SCSS. Also, I will explain & distinguish between SASS & CSS. Last but not least, I will also give you […]

Read More →