Set prefered with of module in Page template

New Contributor

In a page I typically have a a div the size of the whole page then a div inside. The div inside is centered inside the first div and has a prefered with (width:100%; max-width:800px;). 
now when I use hubspot drag and drop templates I cannot do this since there are 4 divs enclosing the module and hence width:100% has no effect resulting in a div of the size of its child elements. 
I am wondering if there is a nice way of doing this without going into html source mode. I am open to any suggestion on how to get the same result.

Reply
0 Upvotes
1 Reply 1
Regular Advisor | Partner

@Yannick1 instead of targeting the div elements, use a class. For example, add the class "page-center" to your row in the drag and drop template, then in your css file use the styles:

.page-center { width: 100%; max-width: 800px; }

You will probably also need to overwrite the defaut grid float and margin styles to center align it on the page.

 

hope that helps!

Stefen Phelps, Community Champion, Kelp Web Developer
Reply
0 Upvotes