Adjusting module width in the landing page editor

[MichL]

Hey there! I have a landing page that looks good on mobile but is too elongated on desktop. I'm looking for a way to reduce the max width of my rich text modules as a temporary quick fix to mobile responsiveness.

I was looking at this Hubspot Community post, and it looks like the following head HTML should fix the issue for forms:

<style>
#hs_cos_wrapper_module_1605115967568431 {
max-width: 500px;
margin: 0 auto;
}
</style>

Is there a similar code that can be used to adjust the max width of rich text modules, instead of form modules? Alternatively, is there a way for me to pull the IDs of my rich text modules and replace it in the code snippet?

...or am I vastly simplifying something that should be a page stylesheet fix? 😅

[Niharika]

Hi @MichL 

Trust you are doing great.

It would be great if you can share the WEB URL of landing page.

Thanks

Niharika Goyal

[MichL]

Thanks for the reply Niharika, that would certainly make sense to share 🙂 Here is the URL

[removed]

[Niharika]

Hi @MichL 

Trust you are doing great.

I have checked the page.  To reduce the text width and make it center aligned please use below CSS

<style>

.hero .span12.widget-span.widget-type-cell.container

{

width:100%;max-width:70%;padding-left:0px;

}

@media (max-width:767px)

{

.hero .span12.widget-span.widget-type-cell.container

{

width:100%;max-width:100%;padding-left:0px;

}

}

</style>

After adding the above styling your page would look like below

Please check and let me know if you will need any further assistance.

Thanks

Niharika Goyal

[MichL]

Thank you Niharika, I really appreciate the assistance here. Unfortunately this causes the mobile version to become cut off. That's okay though, I will keep the landing page as-is for now. Thank you!