# Responsive Design Issues with Landing Page

**URL:** <https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680>\
**Category:** CMS Development\
**Created:** [August 1, 2020, 3:02pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680 "2020-08-01T15:02:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marketer1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marketer1/32/33328_2.png) [@Marketer1](https://community.hubspot.com/u/Marketer1)\
**Post date:** [August 1, 2020, 3:02pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/1 "2020-08-01T15:02:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 1, 2020, 7:33pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/2 "2020-08-01T19:33:10Z")

</div>

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:

```auto
...
<div class="twoColumnRow">
<div class="leftColumn">
...
</div>
<div class="rightColumn">
...
</div>
</div>...

```

Your CSS would look like this:

```auto
.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

---

<div class="post-metadata">

**Author:** ![Marketer1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marketer1/32/33328_2.png) [@Marketer1](https://community.hubspot.com/u/Marketer1)\
**Post date:** [August 1, 2020, 8:30pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/3 "2020-08-01T20:30:16Z")

</div>

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.

 ![29890iFE2EFBA6F04B1F7E.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/2/823e20a1315b2ddff126ce12d1570609ac63b300.png)  
Options when I click on edit Image Module  
 ![29891iB3C66AEFBFA56FA3.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/8/d823cb6ececce54ccd4e846192899378001cbeef.png)  
Options when I click on Column module

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 1, 2020, 9:01pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/4 "2020-08-01T21:01:35Z")

</div>

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:

 ![29892i0FE30E7CE7DBB31B.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/a/aad3d995fff320dd3d175c7397c7f03afb254fcc.png)

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

---

<div class="post-metadata">

**Author:** ![Marketer1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/marketer1/32/33328_2.png) [@Marketer1](https://community.hubspot.com/u/Marketer1)\
**Post date:** [August 1, 2020, 9:26pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/5 "2020-08-01T21:26:10Z")

</div>

Thank you! That really helps a lot. I will try that out.

---

<div class="post-metadata">

**Author:** ![JanetArmstrong](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/janetarmstrong/32/99730_2.png) [@JanetArmstrong](https://community.hubspot.com/u/JanetArmstrong)\
**Post date:** [August 2, 2020, 1:06pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/6 "2020-08-02T13:06:40Z")

</div>

Can you post the url of your landing page?

---

<div class="post-metadata">

**Author:** ![HenryLeo025](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/henryleo025/32/13521_2.png) [@HenryLeo025](https://community.hubspot.com/u/HenryLeo025)\
**Post date:** [January 20, 2021, 1:09pm UTC](https://community.hubspot.com/t/responsive-design-issues-with-landing-page/23680/7 "2021-01-20T13:09:16Z")

</div>

Can anyone tell me how can i [embed](https://sewingempire.com/) my chat on single page? please help if you can.