How to Create a Responsive Visualforce Page

In the previous article we talked about creating a simple visualforce page and adding it to the Right Side URL on our login page in our Salesforce Environments. Here we are going to go further and talk about the customization that we can do and create a responsive Visualforce pages.

Creating a simple visualforce page

For our example we will use a simple HTML and CSS in creation of our responsive visualforce page.

<apex:page showHeader="false" cache="false">
  <div>
     <div>
       <a href="https://www.trailhead.com" target="_blank"><span>TRAIL </span> <span>A</span><span>HEAD </span><span>TO YOUR </span><span>CERTIFICATE</span></a>
     </div>
     <div>
       <a href="https://www.codestreets.com" target="_blank"></a>
     </div>
  </div>
</apex:page>

I hope you are already familiar with simple CSS and HTML and we won’t be talking into details about the code above.

Defining the CSS classes

By playing with the code we make our design look cooler and more acceptable for the viewer.

Most importantly is that we add the .responsive class, and in that class we will add our image from @sarahdorweiler, that we will be using for our example.

<style type="text/css">
.responsive {
   position:relative; 
   background-image:url({!URLFOR($Resource.landingImage)}); 
   background-size:100%;
   min-height:1800px;
   background-repeat:no-repeat;
 }
}
</style>

Followed by other classes

//the .title_wrapper will be used in our second div tag to set the top text position
.title_wrapper{
  width:70%;
  padding-top: 130px;
  padding-left:40px;
}
//the title class will be used for our link
.title{
  font-size:50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  color:#114250; 
  text-decoration: none;
}
//this class is created to override the default style for link
.title:hover{
  text-decoration: none;
  color:#114250;
}
//this class will do the same just on the span and modify the text with right font color and size
//when we hover over the text
.title:hover .titleSpan{
  font-size:50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  color:#F3B71A;
}
//the spanBorder class will put the underline below our CERTIFICATE word
.title:hover .spanBorder{
  border-bottom: 4px solid #F3B71A;
}
//the csButton class will add the logo that we have previously added to our static Resources
.csButton {
  background-repeat:no-repeat;
  background-image:url({!URLFOR($Resource.codeSTREETSLogoWhite)});
  height:50px;
}
//this class will add other version of logo that we have previously added to our static Resources
//and it will change on hover
.csButton:hover{
  background-repeat:no-repeat;
  background-image:url({!URLFOR($Resource.codeSTREETSLogoGolden)});
  height:50px;
}

Defining the right font

When we are done with adding the classes to our style, we are going to add our Font that was chosen by the business and stored in the Static Resources, that will fit for different web browsers.

@font-face{
  font-family: 'Montserrat';
  src: url("{!URLFOR($Resource.MontserratFont)}"); /* IE9*/
  src: url("{!URLFOR($Resource.MontserratFont)}") format('embedded-opentype'), /* IE6-IE8 */
  url("{!URLFOR($Resource.MontserratFont)}") format('woff'); /* Modern browsers*/
  font-weight: 400;
  font-style: normal;
}

Adding @media queries

According to the documentation available for media queries they were introduced in CSS3 and they use the @media rule to include a block of CSS properties only if a certain condition is true. For our scenarios we want to include the rules for couple of screens ( 1024px, 1440px, 2560px ).In our case, because we use half of the screen for the Right Side of our Salesforce Login Page we need to divide them on half (512px, 720px, 1280px).

@media all and (min-width: 512px) {
.csButton
  {
    height: 5%;
    width: 35%;
    position: absolute;
    top: 21.5%;
    left: 66%;
    background-size: 100%;
  }
}

@media all and (min-width: 720px) {
.csButton
  {
    height: 5%;
    width: 35%;
    background-size: 100%;
    position: absolute;
    top: 30%;
    left: 66%; 
  }
}
//
@media all and (min-width: 1280px) {
.csButton 
  {
    height: 5%;
    width: 35%;
    background-size: 100%;
    position: absolute;
    top: 53%;
    left: 66%;
  }
}

Include the CSS in the Visualforce page

Our Visualforce page with all the CSS classes added on the corresponding elements, will look like this:

<div class="responsive">
  <div class="title_wrapper">
    <a href="https://www.trailhead.com" target="_blank" class="title"><span class="titleSpan">TRAIL </span> <span>A</span><span class="titleSpan">HEAD </span><span>TO YOUR </span><span class="spanBorder">CERTIFICATE</span></a>
  </div>
  <div>
    <a href="https://www.codestreets.com" target="_blank" class="csButton"></a>
  </div>
</div>

Final Result

Before hover over the text presented on the Right Side of the Salesforce login page.

With hover over the text presented on the Right Side of the Salesforce Login page. Same goes for the codeSTREETS logo presented on the screen.

Full code

Please note that sometimes the code might not fit your needs and you will need to do some tweaking. Enjoy!

<apex:page showHeader="false" cache="false">
 <style type="text/css">
 @font-face{
   font-family: 'Montserrat';
   src: url("{!URLFOR($Resource.MontserratFont)}"); /* IE9*/
   src: url("{!URLFOR($Resource.MontserratFont)}") format('embedded-opentype'), /* IE6-IE8 */
   url("{!URLFOR($Resource.MontserratFont)}") format('woff'); /* Modern browsers*/
   font-weight: 400;
   font-style: normal;
 }

 .responsive {
   position:relative; 
   background-image:url({!URLFOR($Resource.landingImage)}); 
   background-size:100%;
   min-height:1800px;
   background-repeat:no-repeat;
 }

 .title_wrapper{
   width:70%;
   padding-top: 130px;
   padding-left:40px;
 }
 .title{
   font-size:50px;
   font-family: 'Montserrat', sans-serif;
   font-weight: normal;
   color:#114250;
   text-decoration: none;
 }
 .title:hover{
   text-decoration: none;
   color:#114250;
 }
 .title:hover .titleSpan{
   font-size:50px;
   font-family: 'Montserrat', sans-serif;
   font-weight: normal;
   color:#F3B71A;
 }
 .title:hover .spanBorder{
   border-bottom: 4px solid #F3B71A;
 }
 .csButton {
   background-repeat:no-repeat;
   background-image:url({!URLFOR($Resource.codeSTREETSLogoWhite)});
   height:50px;
}
 .csButton:hover{
   background-repeat:no-repeat;
   background-image:url({!URLFOR($Resource.codeSTREETSLogoGolden)});
   height:50px;
 }

 @media all and (min-width: 512px) {
  .csButton{
     height: 5%;
     width: 35%;
     position: absolute;
     top: 21.5%;
     left: 66%;
     background-size: 100%;
   }
 }

 @media all and (min-width: 720px) {
  .csButton{
     height: 5%;
     width: 35%;
     background-size: 100%;
     position: absolute;
     top: 30%;
     left: 66%;
   }
 }

 @media all and (min-width: 1280px) {
  .csButton{
     height: 5%;
     width: 35%;
     background-size: 100%;
     position: absolute;
     top: 53%;
     left: 66%;
   }
 }
</style>
<div class="responsive">
  <div class="title_wrapper">
    <a href="https://www.trailhead.com" target="_blank" class="title"><span class="titleSpan">TRAIL </span> <span>A</span><span class="titleSpan">HEAD </span><span>TO YOUR </span><span class="spanBorder">CERTIFICATE</span></a>
  </div>
  <div>
    <a href="https://www.codestreets.com" target="_blank" class="csButton"></a>
  </div>
</div>
</apex:page>