June 11, 2017

Troubleshooting HubSpot COS Development

As a HubSpot COS developer, it is my job to create many HubSpot web pages.

This is generally easy for someone who eats code for breakfast. (Hope, none of my colleagues are reading this)

But often there are issues face.

Here, I will maintain a continuously updated list of issues faced while developing websites on HubSpot CMS / COS.

Banner image sizes – Not appropriate for mobiles and tablets
Text visibility – Blur issues

Banner image sizes

As developers, we are constantly faced with the problem of trying to make images responsive to the websites that we create. This is difficult because inherently, images are not responsive. So what must we do to sort this issue?

‍

Targeting Device Sizes for Background

I would first like to discuss device and pixel dimension targeting. Before you start writing your code, you will want to decide which tablet size and mobile size you would like to optimize your images for. In the below example, I am going to be using Apple iPad (768 pixels in portrait orientation) and Apple iPhone dimensions (480 pixels in portrait orientation).

Once you have figured out which devices and pixel dimensions that you would like to optimize your images for you’re ready to start writing your code.

Responsive Images Implementation

At a high level, we are going to be specifying which images are displayed on the screen by using media queries. In this post, we will be targeting three types of devices: Desktop Computers, Tablets & Mobile devices. To implement this effect on your own website you will write media queries in your main stylesheet at the tablet and mobile dimensions that you have decided to optimize for.

Module, where is the problem?

I have the image set as a background image on the module “Banner Section”, and I have assigned it a unique class that we will discuss in the CSS section of this post.

It is important to set up your image as a background image on the module and then bring in the image file in the CSS stylesheet. This technique will allow you to change the image files at different pixel dimensions.

CSS for Desktop

In your CSS stylesheet, you want to pull in your largest image file for laptop and desktop computers first.

.banner-section{
height: 1000px;
background-position: center top 153px;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #2c5461;
background-image: url(‘https://cdn2.hubspot.net/hub/full-width-banner.png’);
background-size: contain;
}

CSS for Tablet

In the tablet CSS section, I start with a media query that tells the computer to only serve this image up if the pixel dimensions of the device are a max width of 768 pixels.

@media screen and (max-width: 768px){
.banner-section{
height:400px;
background-position: center top 170px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(‘https://cdn2.hubspot.net/hub/tablet-size.jpg’);
background-color: #2c5461;
}
}

CSS for Mobile

The same technique is used for the mobile device image. You write a media query that targets devices at a certain pixel dimension (in my case I have selected 480px). Then you bring in an image file optimized for that dimension.
‍
@media screen and (max-width: 480px){
.banner-section{
visibility: visible;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-image: url(‘https://cdn2.hubspot.net/hub/mobile-size.jpg’);
}
}

Text on site was blurred

Regarding the difference between the browser in Mac and Windows, it seems that this is not an issue related to HubSpot COS but to the nature of the OS and the browser.

A quick search on Google pointed me to the discussion about this issue: https://stackoverflow.com/questions/5082632/same-font-except-its-weight-seems-different-on-different-browsers if your developers could add that the rule