topic How to keep the layout of a section centered concerning a whole width section itself in CMS Development

How to keep the layout of a section centered concerning a whole width section itself

JVallejo7 — Tue, 11 Oct 2022 08:00:22 GMT

We want our 12-column grid centered on the Fluid width (inside a section).
We also want to know how to have a margin of 140px to sx and dx within the full width so that our 12 columns are centered on a base of 14 columns in a resolution of 1920px.

Anyone have this problem?

THX

This is what I want

Another example

Re: How to keep the layout of a section centered concerning a whole width section itself

TitiCuisset — Mon, 10 Oct 2022 08:05:21 GMT

Hi @JVallejo7

Thank you for reaching out.

I want to tag some of our experts here - @Anton @Sjardo do you have any thoughts for @JVallejo7 on this?

Thank you!
Best

Tiphaine

Re: How to keep the layout of a section centered concerning a whole width section itself

JVallejo7 — Tue, 11 Oct 2022 07:51:16 GMT

I am seeing this page in Hubspot, but it isn´t updated...

Re: How to keep the layout of a section centered concerning a whole width section itself

ChehakWadhdwa — Tue, 11 Oct 2022 09:13:25 GMT

Hey @JVallejo7

Hubspot only allow 12 columns in drag and drag. you can add padding in left right side if you need spacing, but by dnd you can't make 14 columns , you can make 14 columns by module level with custom css

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

Re: How to keep the layout of a section centered concerning a whole width section itself

JVallejo7 — Tue, 11 Oct 2022 15:08:59 GMT

Thanks a lot !

Do you know what code I need in _layout.css ?

I am trying to follow this code to understand a little, but I don't know how could I do this.

Thanks a lot.

Re: How to keep the layout of a section centered concerning a whole width section itself

Anton — Wed, 12 Oct 2022 06:33:50 GMT

Hi @JVallejo7,

if you want to keep the drag&drop functionality of this builing block you'll have to modify your CSS. Just for the record: HubSpot uses a custom version of Bootstrap2.

If you want to have something completly own it's possible but - as mentioned - only with custom code. If you have little to no experience with HubSpot development, I'll recommend to work in the Design-Tools. If you want, you can use the CLI. But it's not as easy as the Design-Tools. Especially for beginners.

My personal recommendation would be to create a custom module for your whole row/sections, add the used grid CSS to a new/exsiting CSS file and use the grid classes in the module. If you haven't developed modules before, I'd suggest to pass the "CMS for developers" certification in the HubSpot academy. You'll learn how/where to start and what's important. After that head over to developers.hubspot.com and dive into the Hubl templating language and building blocks sections.

A basic section module could look like this

<section class="myCustomSection"> <div class="container"> <div class="row"> {# start left column #} <div class="leftColumn col-14 col-lg-6 col-lg-offset-1"> <h2 class="myCustomHeadline">{{ module.headline }}</h2> </div> {# end left column #} {# start right column #} <div class="rightColumn col-14 col-lg-6"> <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="myCustomImage"> </div> {# end right column #} </div> </div> </section>

if you add styling via the styling options to it it should look something like this

{# start styling #} {% require_css %} .myCustomSection.{{ name }}{ background-color:{{ module.style.background_color.css }}; } {% end_require_css %} {# end styling #} {# start layout #} <section class="myCustomSection {{ name }}"> <div class="container"> <div class="row"> {# start left column #} <div class="leftColumn col-14 col-lg-6 col-lg-offset-1"> <h2 class="myCustomHeadline">{{ module.headline }}</h2> </div> {# end left column #} {# start right column #} <div class="rightColumn col-14 col-lg-6"> <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="myCustomImage"> </div> {# end right column #} </div> </div> </section> {# end layout #}

Or - you could drop your 14-column logic and "go back" to a widely accepted 12-column grid. This will make your life much easier since you could use the buildin classes and the only thing that's left is to customize the media-queries if they're not sufficient enough for you.

If you have started from scratch I recommend to take a look at the cms boilerplate which contains the latest default layout classes. You can either create a new theme with the boilerplate as a starting point or just copy&paste/fetching it from Github.

By staying in the HubSpot grid you could create a custom drag&drop sections.

a very basic custom drag&drop section could look like this

{% dnd_section padding={"top":"60px","bottom":"60px"}, vertical_alignment="TOP" %} {% dnd_module path='@hubspot/rich_text' %} {% module_attribute 'html' %} {{ context.content || '<h2 class="tc">Lorem Ipsum</h2> {% end_module_attribute %} {% end_dnd_module %} {% end_dnd_section %}

What's also very important it's the understanding of how it's structured. Here's a helpful resource/link

hope that helps,

best,

Anton

Re: How to keep the layout of a section centered concerning a whole width section itself

JVallejo7 — Thu, 13 Oct 2022 08:14:20 GMT

Thanks a lot for your response, I will try to do it with your advice.

I see you are applying classes "col-14 col-lg-6 col-lg-offset-1" in your code.
This advanced bootstrap code is not in the default hubspot template.
Would I have to change it completely?

This is my _layout.css:

.body-wrapper {
overflow: hidden;
}

/* Responsive Grid */

.row-fluid {
width: 100%;
*zoom: 1;
}

.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}

.row-fluid:after {
clear: both;
}

.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}

.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}

.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}

.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}

.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}

.row-fluid .span7 {
width: 57.446808505%;
*width: 57.3936170156383%;
}

.row-fluid .span6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
}

.row-fluid .span5 {
width: 40.425531911%;
*width: 40.3723404216383%;
}

.row-fluid .span4 {
width: 31.914893614%;
*width: 31.8617021246383%;
}

.row-fluid .span3 {
width: 23.404255317%;
*width: 23.3510638276383%;
}

.row-fluid .span2 {
width: 14.89361702%;
*width: 14.8404255306383%;
}

.row-fluid .span1 {
width: 6.382978723%;
*width: 6.329787233638298%;
}

.container-fluid {
*zoom: 1;
}

.container-fluid:before, .container-fluid:after {
display: table;
content: "";
}

.container-fluid:after {
clear: both;
}

@media (max-width: 767px) {
.row-fluid {
width: 100%;
}

.row-fluid [class*="span"] {
display: block;
float: none;
width: auto;
margin-left: 0;
}
}

@media (min-width: 768px) and (max-width: 1139px) {
.row-fluid {
width: 100%;
*zoom: 1;
}

.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}

.row-fluid:after {
clear: both;
}

.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.762430939%;
*margin-left: 2.709239449638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

.row-fluid .span12 {
width: 99.999999993%;
*width: 99.9468085036383%;
}

.row-fluid .span11 {
width: 91.436464082%;
*width: 91.38327259263829%;
}

.row-fluid .span10 {
width: 82.87292817100001%;
*width: 82.8197366816383%;
}

.row-fluid .span9 {
width: 74.30939226%;
*width: 74.25620077063829%;
}

.row-fluid .span8 {
width: 65.74585634900001%;
*width: 65.6926648596383%;
}

.row-fluid .span7 {
width: 57.182320438000005%;
*width: 57.129128948638304%;
}

.row-fluid .span6 {
width: 48.618784527%;
*width: 48.5655930376383%;
}

.row-fluid .span5 {
width: 40.055248616%;
*width: 40.0020571266383%;
}

.row-fluid .span4 {
width: 31.491712705%;
*width: 31.4385212156383%;
}

.row-fluid .span3 {
width: 22.928176794%;
*width: 22.874985304638297%;
}

.row-fluid .span2 {
width: 14.364640883%;
*width: 14.311449393638298%;
}

.row-fluid .span1 {
width: 5.801104972%;
*width: 5.747913482638298%;
}
}

@media (min-width: 1280px) {
.row-fluid {
width: 100%;
*zoom: 1;
}

.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}

.row-fluid:after {
clear: both;
}

.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.564102564%;
*margin-left: 2.510911074638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
margin-left: 0;
}

.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}

.row-fluid .span11 {
width: 91.45299145300001%;
*width: 91.3997999636383%;
}

.row-fluid .span10 {
width: 82.905982906%;
*width: 82.8527914166383%;
}

.row-fluid .span9 {
width: 74.358974359%;
*width: 74.30578286963829%;
}

.row-fluid .span8 {
width: 65.81196581200001%;
*width: 65.7587743226383%;
}

.row-fluid .span7 {
width: 57.264957265%;
*width: 57.2117657756383%;
}

.row-fluid .span6 {
width: 48.717948718%;
*width: 48.6647572286383%;
}

.row-fluid .span5 {
width: 40.170940171000005%;
*width: 40.117748681638304%;
}

.row-fluid .span4 {
width: 31.623931624%;
*width: 31.5707401346383%;
}

.row-fluid .span3 {
width: 23.076923077%;
*width: 23.0237315876383%;
}

.row-fluid .span2 {
width: 14.529914530000001%;
*width: 14.4767230406383%;
}

.row-fluid .span1 {
width: 5.982905983%;
*width: 5.929714493638298%;
}
}

/* Clearfix */

.clearfix {
*zoom: 1;
}

.clearfix:before, .clearfix:after {
display: table;
content: "";
}

.clearfix:after {
clear: both;
}

/* Visibilty Classes */

.hide {
display: none;
}

.show {
display: block;
}

.invisible {
visibility: hidden;
}

.hidden {
display: none;
visibility: hidden;
}

/* Responsive Visibilty Classes */

#main-content .visible-phone {
display: none;
}

#main-content .visible-tablet {
display: none;
}

#main-content .hidden-desktop {
display: none;
}

@media (max-width: 767px) {
#main-content .visible-phone {
display: inherit;
}

#main-content .hidden-phone {
display: none;
}

#main-content .hidden-desktop {
display: inherit;
}

#main-content .visible-desktop {
display: none;
}
}

@media (min-width: 768px) and (max-width: 1139px) {
#main-content .visible-tablet {
display: inherit;
}

#main-content .hidden-tablet {
display: none;
}

#main-content .hidden-desktop {
display: inherit;
}

#main-content .visible-desktop {
display: none;
}
}

Re: How to keep the layout of a section centered concerning a whole width section itself

Anton — Thu, 13 Oct 2022 22:04:14 GMT

Hi @JVallejo7,

right. I've used those classes just as an example. They might differ from yours.

And as hard as it is - I have to recomend you not to modify the default grid of HubSpot. Unless you want to of course.

If you're not planing to use the drag&drop functionality but create "hard coded" templates with specific custom modules or default HubSpot modules, you can ignore the default it completly. To do so you can replace it with your tailwind, Bootstrap5 or whatever grid system you're using CSS.

If you want to add your custom grid on top because you want to use drag&drop, I recomend you to create a new/empty CSS file, paste your grid into it and import the CSS file in your main.css file. This will bloat the CSS and can lead to a performance drop but this is a working pracitise. The only thing to note is that you either load it after the default grid or work out the classes that are same.

If you haven't already simply create a file with

{% dnd_area "dnd_area" label="Main section", class="body-container body-container--about" %} {% end_dnd_area %}

this code(which would not work for production) will give you this as output

... <div class="container-fluid body-container body-container--about"> <div class="row-fluid-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> </div> </div> </div> </div> ...

so you need the default grid for the drag&drop functionality since drag&drop areas, sections, row, modules will always generate those classes.

As mentioned - you can completly ignore them if you're not using drag&drop or create for everything a custom module.

hope that helps

best,

Anton