CSS

How to style your WordPress Sidebar Widget

Widget Title Style – 1 If your width title wrap directly under heading tag like H2, H3, etc like the below screenshot then use .widget .widget-title If the actual text wrap with another inline element like span the below screenshot then you need to add that extra wrapping tag also .widget .widget-title span

[Solved] CSS Clip-path using SVG Polygons doesn’t work well on Safari

Problem: Revolution Slider SVG Scroll Down button is not showing on Safari at Desktop, iPad, and iPhone browser. My Revolution Slider SVG Polygon Scroll Down button is working great in Firefox and Chrome but when it’s come to Safari it completely has gone. See the screenshot Solution: How to fix CSS Clip-path Polygon on Safari …

[Solved] CSS Clip-path using SVG Polygons doesn’t work well on Safari Read More »

How to remove whitespace on the right side of mobile and tablet view in Astra theme

How to remove whitespace on the right side of mobile and tablet view in Astra theme

One of my clients asked me to fix an error in Mobile view of his website. It’s using Astra Pro theme with Thrive Architect page builder. Mobile View – There is an extra white space to the right (left and right scrolling) caused by the tiny scroll to the to button. Client’s Comment Here is …

How to remove whitespace on the right side of mobile and tablet view in Astra theme Read More »

Divi toggle open with title background color.png

How to Change the Background color of Divi Toggle Module Title and Icon

By default Divi Toggle Module didn’t have any style for Toggle open view. It’s look very plain like the below image. We can add a little CSS to add Background color to the Toggle title and make it stand alone from rest of the content. Copy above CSS code in your Divi Theme Option or …

How to Change the Background color of Divi Toggle Module Title and Icon Read More »

Avada – Change fusion tabs heading position in mobile layout

Avada fusion tabs, the horizontal tabs work well on a desktop when viewed on mobile the tabs become vertical (which is good) but the content appears under the specific tabs pushing the rest above and/or below the open contents (which is bad). Many mobile users may not even realize that there are more tabs if they …

Avada – Change fusion tabs heading position in mobile layout 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 »

Scroll to Top