VinSolutions Websites Custom Coupons Using W3.CSS

My last post mentioned how I stumbled upon a solution for creating nice looking coupons for VinSolutions dealer websites. Following is a DIY tutorial on how to accomplish this for yourself.

First Steps

The first step is to get the css linked to the page. This is where I encountered the only problem with using the w3schools w3.css. I figured the easiest solution was to simply link to the w3.css cdn.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Although this does work, there is an issue. Because this new css code is below all other css (and the browser reads the code line by line as the page loads) this css will take precedence over all VinSolutions css code. So I downloaded the css file and commented out lines 38 to 42.

I left the top 45 lines of code (note says it’s extracted from normalize.css) plus a few lines after (links, images and tables) that I figured wouldn’t interfere but enhance the overall pages. I then uploaded this file to one of my sub-domains and linked the file.

Everything worked nicely with the exception of the images. They were not responsive. Since I was linking to my own version of the file this wasn’t a problem. Change (around line 45):

img{margin-bottom:-5px}

To:

img{margin-bottom:-5px;max-width:100%;}

Now the images are responsive. NICE!

Creating Custom VinSolutions Dealer Websites Coupon

I wanted the coupon to be half of the page on the desktop but it would fill the entire screen on the mobile version. So the first step was to create a column using VinSolutions css.

<div class="col-1-2">

Inside of this 1/2 page column the card gets inserted:

<div class="w3-card-2">

The header of the card displays the offer:

<header class="w3-container">

After the header is the container that contains the details of the offer:

<div class="w3-container">

At the bottom of the details container the area for the fine print/disclaimer is needed:

<div class="w3-row">

Then inside that area is the actual fine print/disclaimer (which I chose to give some separation with a line):

<p class="w3-tiny w3-border-top">

So when we put this all together with the Title, Image, Details and Disclaimer it looks like this:

So after a few of these were created the alignment was off a little bit on the desktop version. That is easily fixed by wrapping every two coupons in a row. At first I tried this with the VinSolutions column code col-1-1 but that has some padding built in. W3.css had a solution with: