Snippets

divi-logo

How to Create a Fixed and Scrollable Dropdown Mobile Menu in Divi

By default, Divi theme didn’t have a fixed menu for mobile/tablets like on the desktop. This means that you won’t see the menu as soon as you start scrolling down the website on a mobile. This topic will cover: How to create a fixed mobile menu in Divi How to create a scrollable mobile menu in …

How to Create a Fixed and Scrollable Dropdown Mobile Menu in Divi Read More »

SyntaxHighlighter plugin

Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin

By Default Syntaxhighlighter Evolved plugin came with no top and bottom padding and very tight line height. If you are someone like me who love some breathing space in between every section in a WordPress post then you can try the below CSS code snippet. Screenshots are attached before and after applying the CSS code. …

Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin Read More »

Center and crop images with CSS: image-after

Center and crop image with pure CSS

It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; } That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized pictures down to squares or circles. Take this wide photo below for example. Once object-fit: cover is applied to the …

Center and crop image with pure CSS Read More »

How-to-Use-Rsync-to-Sync-remote-and-local-directories

How to Use rsync to Transfer and Synchronize Local and Remote Directories

Rsync (Remote Sync) is a most commonly used command for copying and synchronizing files and directories remotely as well as locally in Linux/Unix systems. With the help of rsync command you can copy and synchronize your data remotely and locally across directories, across disks and networks, perform data backups and mirroring between two Linux machines. Using the Rsync for Linux is somewhat tricky and you have to be …

How to Use rsync to Transfer and Synchronize Local and Remote Directories Read More »

How to change revolution slider background color opacity

How to change revolution slider background color opacity

.rev_slider .slotholder:after { width: 100%; height: 100%; content: “”; position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(255, 255, 255, 0.5); } Can do the same for section background image, just need to add a class to the container and put the .classname in place of .rev_slider .slotholder

Scroll to Top