How To Make Your Google Adsense Responsive In WordPress

Recently, I had an issue with google Adsense on how to make it responsive in all devices. Since I am starting to earn money on Adsense, I don’t want to remove it so dig in and luckily found the documentation from Google Adsense resource.

This tutorial basically cover how I interprent the tutorial provided by Google Adsense. I believed it will work on all ad units including display ads, in feed ads, in-article ads and even in link ads. 

Step 1: Insert a Custom class on your adsense script

Insert a custom class after the adsbygoogle class so we can overwrite the style of our ads. Kindly check the before and after below to see the difference.

BEFORE:


< ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-ad-slot="6478502035">

AFTER:

< script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
< ins class="adsbygoogle responsive-adbanner" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-full-width-responsive="true" data-ad-slot="6478502035">

< script>
(adsbygoogle = window.adsbygoogle || []).push({});

Now, copy/paste the code on theme options or style.css. Basically, this code will tell the browser to adjust the width of the adsense once it reach the declared viewport. The other css code generally normalize the styling and removing any scrolling styles on your adsense.

@media(max-width:23.436em){
.adsbygoogle.responsive-adbanner {
width:22em;
}}
@media(max-width:64.436em){
.adsbygoogle.responsive-adbanner {
width:63em;
}}
.adsbygoogle.responsive-adbanner {
width:95%;
overflow: hidden;
padding:0;
margin: 2rem 0;
}

If you don’t want to use custom css, adding a inline-style on the script will work but for best practices, it’s highly recommended to keep your code DRY (Don’t Repeat Yourself).

How To Put A Divi Module Inside The Divi Tab Layout

Putting a Divi module inside the tab menu is not available by default in Divi but in this blog, I will reveal the trick for you.

Add a tab module

add tab module in Divi

 

Create a sample post. As an example, I would like to put a blurb module inside the tab module. Let’s do the magic!

Configure your blurb and finalize the elements. Once done, it’s time to get the shortcode.

1. Hover the Builder button > right click to inspect the elements and remove the et_pb_hidden inside the class name.
trick to get the divi shortcode

2.
step 2 in getting the divi module shortcode

As an example, here’s the final shortcode for your blurb.

module

 

Result:

w

Menu 1

 

Now, you can put that shortcode on your tab module. Feel free to add classes to style your tab module or tab container e.g using grid classes inside the blurb module

 

 

How Create Mansory Divi Layout With Text Inside The Image Using CSS Grid

To have this kind of design, we will need to use custom classes and grid.

Please declare the grid-image custom class in the menu and add a class in the row called grid-container then duplicate the container two times to have 3 column image. Here’s the quick screen recording.

Please go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:  Feel fre to change the font-size according to your liking.

.grid-container {
display: grid;
grid-template-columns: repeat(3,33%);
}

.grid-image p {
margin-top: -7em;
padding: 2%;
color: white;
font-size: .9em;
line-height: 1em;
}

 

How To Create Mansory Design In Divi Using Custom CSS Grid | WP

If you think the Divi columns features doesn’t support what you want in creating a mansonry grid layout either for your gallery, portfolio, images. This CSS grid will do the trick for you.

 

 

Basically, we will need to use 1 column and push all the elements vertically or horizontally depending of the design you wanted to create. In this example, we will create this kind of layout.

 

1.Open your page or post and create a one column row

divi column

 

2.Open the Row Settings by clicking the gear icon > Advanced tab > add a class name. As an example I use mygrid_column

divi row settings

 

3.Add a class on your inner module, As an example, I use lender_img

module settings advanced tab

 

Go to WordPress dashboard > Divi > Theme Customizer > Custom CSS and add the following code

div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(4,1fr);
align-self: center;
}

If you want to change the number of grids in mobile version, simply add this media query. Let’s say if viewed in mobile, images will turn into columns so that will be

@media (max-width: 414px) {div.et_pb_row.mygrid_column>.et_pb_column {
display: grid;
grid-template-columns: repeat(3,1fr);
align-self: center;
}}

Preview:mansory grid css sample divi

Top 5 Signs Of Hiring A PowToonist Expert – Should DIY Or Not?

PowToon is indeed famous with over 10 million users! You will definitely inloved if you tried to use it however despite of PowToon’s user friendly interface, there are some instances that you need to consider in hiring a professional PowToonist.

Checkout out the Top Burning Reasons Why Other Prefer To Hire a PowToonist Expert instead of Doing-it-Yourself.

  • They don’t have enough time to do it.
  • They want to make a better PowToon presentation
  • Plans are too expensive for one time project
  • They want to create a catchy explainer video for their branding
  • They are not creative enough

However, if you have a lot of projects and have enough time to learn PowToon! We’ll definitely encourage to do-it-yourself so you can master the interface. PowToon is not just a tool but it can let your earn money and profession, you can be a PowToonist like us if you’re dedicated to learn how to use it.  Feel free to check the PowToon tutorials for tips and tricks. Happy PowTooning!

Related Post:  PowToon New Library Features

So which one you prefer?

Create a PowToon yourself or hire PowToonist experts like us? The decision is still yours!