I am creating a landing page (pillar page) in HubSpot and it looks fine on desktop but is not being responsive for mobile devices. I had to add padding to make everything line up correctly, but this is throwing off the mobile display. I contacted support and was told to add media queries, but to apply them, I need to add a class or id. I do not have HubSpot CMS and cannot figure out how to add them. Is there a way to add classes to modules in the landing page area of HubSpot?
Hi @Marketer1,
ok - so you’ve gone the right way by using media queries.
Could you please give me/us an example how you’ve used them?
You don’t need HubSpot CMS (now CMS Hub) to apply changes to stylesheets(CSS) or similar.
The logic behind media queries is as following:
- Desktop view - (can also be a media query)
- media queries -
You can either work with “mobile first” in mind or lets call it “top-down”(desktop->Tablet->mobile). It’s up to you. There’s only two things that you have to pay attention to:
- don’t mix them up
and
- keep the media queries clean/simple
here’s a simple example how to write them:
Task: You have a two column row with the class “twoColumnRow” and you want to have each column to have 50px padding on left/right on desktop but only 20px left/right on tablet and no padding on mobile. Furthermore you want that this row has a green background on every screen
The HTML would look like this:
...
<div class="twoColumnRow">
<div class="leftColumn">
...
</div>
<div class="rightColumn">
...
</div>
</div>...
Your CSS would look like this:
.twoColumnRow{
padding:0 50px;background: green;
}
{# Media query for devices with a max width of 1024px #}
@media screen and (max-width:1024px){
.twoColumnRow{
padding:0 20px;
}
}
{# Media query for devices with a max width of 480px #}
@media screen and (max-width:480px){
.twoColumnRow{
padding:0 0;
}
}
Notice that I’ve wrote only the styles that should change inside the media queries.
Since CSS works top-to-bottom you should always write your media queries like “at first I’m defining everything and below only the changing part for every device/resolution/screen size”. If you mix them up it will get very nasty very quick and you’ll end up with a messy code (been there)
Please tell me if you need further support
best,
Anton
Thank you Anton for you help!
I am mostly trying to use the media queries to center images and remove padding on mobile.
I also have a follow up question. I cannot seem to find the areas to on the landing page to insert code to identify the classes. The way it looks right now is that I can only insert code into a rich text module, but I want to apply classes to the actual modules themselves (ex. the entire rich text module or an image). When I select a module, the only options I have are to change the alignment, spacing, background, style, etc. Is there an area where I can apply the classes in my html code for each module because I cannot seem to find that?
Below are two screenshots of what I see when I click on the modules to edit them.
Options when I click on edit Image Module
Options when I click on Column module
So you’re working with the page-builder only?
Then it won’t be possible to add media queries.
You’ll need to go to the “Design-Manager” which can be found here:
Once you’ve opened it you’ll find a few folders in the left sidebar. One of them is orange and has the name “@hubspot”. Open it by clicking on it and look for your template/theme name. Open this folder and you should see a folder called “css”. Open this folder and you should find some files and a few folders. Open the main.css
There will be a few lines with
{%include ... %}
this means that files from different folders are loaded into the main.css.
You have two options:
either you write all your media queries after the last
{% include ... %}
directly into the css (will be the “quick but messy” solutions)
or
you create optimally a subfolder of the css folder(right click on the css folder and select create folder), name it e.g. media-queries(without spaces and all lowercase) and create a file called “media-queries.css”(right-click on the created folder and select create file; select stylesheet) inside this folder. After you’ve written all of your media-queries into this newly created file you need to link it to the main.css.
To link the file simply copy the a
{% include ... %}
line of the main.css and paste it in the last line.
Now you should have one
{% include ... %}
twice in your css file.
To tell HubSpot/the css file to insert your media-query file - right click on your created css file and select “copy path”. Now paste the path into the last
{% include ... %}
that you’ve pasted before.
For example:
you’ve created a subfolder called “media-queries” and a file “custom-media-queries.css” then your “personal” include tag should look like this:
{% include './media-queries/custom-media-queries.css' %}
edit:
If you want you can create multiple .css files to work “more granular” like
tablet-queries.css (will contain only media queries for tablets)
mobile-queries.css (will contain only media queries for mobile-phones)
or more granular:
navigation.css (will contain stylings for the navigation only)
header.css (will contain stylings for the header only)
or even more granular:
rich-text.css (will contain stylings for rich-text only)
images.css (will contain stylings for images only)
It’s completly up to you/your developer(s).
But don’t forget to insert all your .css files into the main.css file. Otherwise your changes won’t be applied.
best,
Anton
Thank you! That really helps a lot. I will try that out.
Can you post the url of your landing page?
Can anyone tell me how can i embed my chat on single page? please help if you can.