Category Archives: Website

CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible

Sometimes the text or caption is not legible on an image depends on the color contrast between the foreground element and the background. I used to edit my image to be more darker or lighter to make the HTML text stand out and readable to users, but well, here’s must easier solution with lines of CSS!

Original

CSS Gradient

HTML

Copy the code below and paste into your HTML document.

<div class="hero-outer">
    <div class="hero-inner">
        <p>CSS Gradient</p>
    </div>
</div>

CSS

Copy the code below and paste into your CSS document.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://blog.identitydesign.us/wp-content/uploads/2019/10/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}

Add a Copyright Text / Info Using CSS on WordPress Websites

Leave a reply

Let’s don’t bother spending hours to look for footer.php or widgets in WordPress to add your Copyright line on the footer of website. Here’s one easy method to add using CSS.

Add copyright text / info with CSS for WordPress/Bootstrap websites

footer > div:before {
    content: "© Copyright (YEAR). All rights reserved.";
    font-size: 14px;
    color: #777;
    text-align: center;
    display: block;
    margin: 20px auto;
}

How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template

3 Replies

WP Bootstrap Starter Theme is one of a popular templates you can get it for free in WordPress. It’s nice with light weighted built in Boostrap 4 framework so it’s ready to use just by having the theme itself.

You can pretty much edit the entire website including the header and footer except for removing the copyright text very bottom of the page saying, “Bootstrap WordPress Theme”.

Here’s a way to make it disappear by adding a CSS line. Let me show you how to do this in a minute!

Remove “Bootstrap WordPress Theme” text on the footer

Go to the Admin website -> Appearance -> Customize -> Additional CSS
Copy the CSS code below and paste on the CSS window.
Save!

footer .sep, footer .credits {
    display:none;
}

(No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include

2 Replies

I’ve looking for this for years, but it’s actually much simpler than I thought. You can build your HTML website with universal header and footer (so you don’t have to repeat update multiple files over and over again) by adding a simple JavaScript/Jquery line without using any programming PHP scripts.

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header-template").load("header.html");
$("#footer-template").load("footer.html");
});
</script>

<div id="header-template"><!--Your header.html placeholder--></div>

<!--Your content start here-->
Hello World!
<!--Your content end here-->

<div id="footer-template"><!--Your footer.html placeholder--></div>

Instruction

Create a header.html and put all the header portion starting with <!DOCTYPE html>.
Create a footer.html and put all the footer portion end with </html>.
Create a index.html and copy and paste the HTML code (from the top of this article) into your HTML document.
Build your own content by replacing the text “Hello World!” and save.
Open the index.html and review yourself.

You can duplicate the index.html and rename it differently for any additional pages you wish to create. This JavaScript works on a server environment, so this will not be able to load header and footer if you are opening the files from your desktop which means you need to upload your files via FTP and access your HTMLs live.

Now, you’ve created a website without using any programming scripts.

CSS / HTML: Make Absolute Center (Vertical & Horizontal)

Leave a reply

For some reasons, making an article absolute center was pretty tricky with HTML.

Horizontal centering is mostly done by text-align:center or margin:auto tags in css. Vertical alignment has to do with positions or vertical-align:middle, and many times an image or other elements are not centering correctly.

Try this below, this is one easy way making your content elements absolute center in vertical and horizontal.

DEMO: Vertical & Horizontal Absolute Centering

Hello.
Your centered content is here!

CSS

Copy the code below and paste into your CSS document.

body {
	display: flex;
	justify-content: center;
	align-items: center;
        text-align:center;
}

Easy and fantastic!

CSS Only: Easy Modal Lightbox Pop-up (Animated)

Leave a reply

Now you can add pop-ups or modal lightbox with CSS only (and really minor single line of JavaScript) on your html, wordpress or bootstrap website, so don’t be afraid.

DEMO: CSS Modal Lightbox

HTML

Copy the code below and paste into your HTML document.

<button onclick="document.getElementById('modal-1').style.display='block'">Click Here</button>

<div id="modal-1" class="modal animate-opacity">
   <div class="modal-content">
      <div class="modal-inner">
         <span onclick="document.getElementById('modal-1').style.display='none'" class="modal-close">&times;</span>
         <h4>Modal Headline</h4>
         <p>Modal description goes here.</p>
      </div> 
   </div>
</div>

You can add multiple modals. Copy the entire codes and replace all modal-1 into modal-2 and modal-3 …

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

These 4 classes would do the job, and the last class, .animate-opacity is the animated effect when modal opens (so it’s optional).

You can tweak the animation time slower or faster by changing the speed time. It’s currently 0.8 seconds, opac 0.8s, but change it as you need it. Have fun!

Why FileZilla Upload Files Repeatedly Saying “File Transfer failed after transferring”?

Leave a reply

If you are stuck uploading files in FileZilla that it repeats the progress bar but not happening anything, and saying “File Transfer failed after transferring XX bytes” in the status log, then one of the possible reasons could be the limit has been reached in your FTP. Most likely, the file(s) you were attempting to upload has exceeded file size (Quota) in FTP account/user. You can request the webmaster of the website (or do it yourself if you have access) to change the file limit to ‘unlimited’ as below.

Change FTP file size limit on cPanel

Go to the server side and enter cPanel
Find FTP Accounts
Find your FTP account and increase the Quota (File size limit) ‘unlimited’ if possible.

How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

1 Reply

Your bootstrap top level menu will not be clickable when you add more menus under it like sub-navs or dropdowns. There are some How-Tos of adding a snippet of JavaScript or php online to make it work, but it seems to be risky and complicated.

Here’s a simple solution changing 1 word from your Bootstrap HTML file:

<li class="dropdown" data-dropdown="dropdown"> 
   <a href="URL" class="dropdown-toggle" data-hover="dropdown">X</a> 
   <ul class="sub-menu dropdown-menu"> 
      <li></li> 
   </ul> 
</li>

Change data-toggle to data-hover. Done!

If you use “Bootstrap-basic” theme on your WordPress, look for a file called, “BootstrapBasicMyWalkerNavMenu.php” under “inc” folder. Find the code “data-toggle” and replace with “data-hover“. Isn’t this super easy!?

How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image)

Leave a reply

Here’s a simple html/css line that could generate a ribbon background with text.

DEMO: CSS Ribbon for Your Website

My Ribbon

HTML

Copy the code below and paste into your HTML document.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

Copy the code below and paste into your CSS document.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
 }
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

You can tweak around with different colors and size of the ribbon. Have fun!

Get a free SSL Certificate (Secure Socket Layer) – Change HTTP to HTTPS for your website domain

Leave a reply

After Google label non-HTTPS sites as “not secure”, SSL(Secure Socket Layer), the domain with HTTPS is strongly encouraged by Google. SSL Certificate used to be quite pricy as it cost generally $80 – $200 annually, but as the demand increased, there is a way to obtain SSL certificate completely free!

Step-by-step Guide:

Go to https://www.cloudflare.com/
Create your account by signing up. Log in afterwards.
“+Add Site” on top right.
Add your site information.
Hit “Next” on “We’re querying your DNS records”.
Confirm the “Free” plan.
It will show DNS query result for your site. Review and hit “Continue”
Change your nameservers(DNS) as described.
On Domain Summary, change “SSL: Full” to “Flexible” no need to hit “Save”.
You are done with the DNS setting. Wait a few hours to 48 hours making sure test your site with adding “https://” in front of your domain url. Once it picks it up with “Not secure” message, then we are in good shape.

If you are using wordpress websites, install a plugin called, “Really Simple SSL”. To find “plugins” on the backend, find the “Plugins” from the left menu, -> “Add new” -> look for “Really Simple SSL”, install and activate the plugin. This plugin will help your website to redirect any old HTTP to HTTPS.

Force an Anchor Tag Not Clickable with CSS

Leave a reply

Yes, it is possible to make your anchors not clickable with simple CSS lines on your website. I know sometimes you developers can’t change the core HTML codes and only have access to the CSS file. Below is the CSS that does the magic.

Make an Anchor Tag Nonclickable with CSS

a {
 pointer-events: none;
 cursor: default;
}

Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information

6 Replies

WordPress Theme users, let’s remove “Proudly powered by WordPress” from the footer of your website. It’s pretty simple. A line of CSS would do the job.

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
}

Replace YOUR WEBSITE NAME as you like.

footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
 margin: auto;
}

If you want to center align the Copyright line, add margin:auto like below:

Remove “Powered by WordPress” on Twenty Twenty Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.powered-by-wordpress {
    display: none;
}

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.has-text-align-right {
    display: none;
}

Now it’s all good!

Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme

Leave a reply

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

Make Clickable Link with JavaScript instead of HTML Anchor

1 Reply

Sometimes you just can’t edit the HTML but still need to make the div clickable. Here’s how with using JavaScript. *Jquery needs to be installed.

<script> 
$('.YOUR-CLASS-NAME').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="YOUR-URL-LINK"></a>');
});
</script>

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

CSS Vertical Align Center

1 Reply

Let’s vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

Simple JavaScript Redirect Code for HTML

Leave a reply

Here’s the one of the simplest ways to redirect your site’s traffic.

Redirect to Different URL

Copy the code below and paste it to your blank html.

<script language="javascript">
window.location.href="http://YOUR-REDIRECT-PAGE"
</script>

Download Sample

*Replace YOUR-REDIRECT-PAGE with your new URL.

Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme

Leave a reply

Wocommerce offers the tabs: “Product Description”, “Reviews and/or “Additional Information” in the product detail page. Let’s find a way to remove or disable the tabs while you are using in the “Storefront” theme.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

Resolved! Loading Your Google Fonts Over https (SSL) Sites

Leave a reply

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

CSS: A Simple Way to Set the Table Column Width

Leave a reply

Here’s a very simple way to size your table width with a few lines of CSS instead of giving inline values to it. This method is much easier for creating responsive tables.

DEMO: How It Looks

35%	15%	5%	35%	10%
A	B	C	D	E
A	B	C	D	E
A	B	C	D	E

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

Circled Number Lists (HTML/CSS)

3 Replies

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>

    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>

    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>

    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>

    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>

    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>

</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

Freebies: Weight Loss Diet / Health Website Design Mock Up (PSD)

Leave a reply

Weight Loss / Health industry website design mock up (HTML/CSS) by Identity Design was designed in Photoshop File. This PSD is available for a free download and fully customizable for your own website or WordPress template.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Download PSD

Freebies: Christmas Responsive Email Template for Business (HTML/CSS)

Leave a reply

Christmas Promotional Email Template (HTML/CSS) by Identity Design was designed in Responsive HTML and CSS. The main banner and the Call-To-Action button are compressed in PSD so it’s fully customizable. This Responsive HTML/CSS Email template with PSD is available for a free download.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Download

Freebies: Foodie Website Mock Up Template (PSD)

Leave a reply

FOODIE Website Design Mock Up by Identity Design is designed in standard resolution 1200 x 750 pixel. This clean & sophisticated design is ready to use on your own design before it’s cut up in HTML. It’s layered in PSD and available for a free download.

Terms

All iiiji.com freebies can be used for both personal and commercial use.
You may not redistribute or resell iiiji.com freebies in any shape or form.

Demo Download

Responsive Google Adsense is Easy!

1 Reply

We are facing a big transition in web design. In recent days, majority of well developed websites are made in responsive websites. Responsive design is the development responding to the environment based on screen size of a device. That being said the content elements must evolve to meet the technology as millions of bloggers are using Google Adsense technology to monetize their content.

Below is the HOW-TO guide to tweak the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of it’s frame work. Here’s an easy way to make it happen.

Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?

Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad unit.

Make sure you select “asynchronous” code type from the drop down menu.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-8255226778912403"
     data-ad-slot="1054112722"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. You simply add a <div> around it.
2. Named the class to responsive-ad on the <div>
3. Added the class responsive-ad to <ins>. So it’s now adsbygoogle responsive-ad.
4. Changed the style to display:block
5. You must replace data-ad-client numbers and data-ad-slot numbers with yours..
6. Added data-format="auto" before closing </ins> tag.
7. Add <style> tags. You can tweak it whatever you want.

<div class="responsive-ad">	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<style type="text/css">
.responsive-ad { width: 320px; height: 50px; margin: 0 auto; }
@media (min-width:480px) { .responsive-ad { width: 468px; height: 60px; } }
@media (min-width:768px) { .responsive-ad { width: 728px; height: 90px; } }
</style>

The <style> above has set a minimum of 768px (and up) for desktops, a minimum of 480px (and up but below 768px) for tablet, and 320px (and up but below 480px) for mobile. You may feel free to change the numbers of min-width: as your site structure.

Enjoy your blogging and monetizing with the new Responsive Google Adsense!

Download: Simple Parallax Smooth Scrolling Website Template

Leave a reply

With new technologies of HTML5, CSS3 and JavaScript, parallax scrolling is one of the hottest trends in web design industry. Floating with different speed of scrolling background elements could make a website stronger in storytelling. It’s easy to find parallax resources online, but it’s hard to find a function with smooth scrolling effect.

Here’s the parallax website with “SMOOTH” scrolling effect for you to download. The website is made of HTML5/CSS/JavaScript. It’s free to use for your website, but it only works on Google Chrome. For other browsers everything works perfectly except for the smooth scrolling effect.

DEMO Download

HTML

CSS

Related posts:

Add copyright text / info with CSS for WordPress/Bootstrap websites

Related posts:

Remove “Bootstrap WordPress Theme” text on the footer

Related posts:

HTML

Instruction

Related posts:

DEMO: Vertical & Horizontal Absolute Centering

CSS

Related posts:

DEMO: CSS Modal Lightbox

Modal Headline

HTML

CSS

Related posts:

Change FTP file size limit on cPanel

Related posts:

Related posts:

DEMO: CSS Ribbon for Your Website

HTML

CSS

Related posts:

Step-by-step Guide:

Related posts:

Make an Anchor Tag Nonclickable with CSS

Related posts:

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Remove “Powered by WordPress” on Twenty Twenty Theme

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Related posts:

Remove “Storefront designed by WooThemes” Credits

Related posts:

Related posts:

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Box Two

Box Three

HTML

CSS

Related posts:

Redirect to Different URL

Related posts:

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Related posts:

Related posts:

DEMO: How It Looks

CSS

HTML

Related posts:

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

CSS

HTML

Related posts:

Terms

Related posts:

Terms

Related posts:

Terms

Related posts:

Related posts:

Related posts: