Help centering & resizing a module

[TaylorLioy]

This is the look I’m going for. The tabbed card is perfectly aligned to the width of the rest of the content below it in other rows.I have to edit the file of this “Tabbed card” module in the design manager in order to get it to be in line with the rest of the copy on this webpage.

You’ll see at the top of the page where I’ve put a tabbed card section. I need it to be the same width as the rest of the content on the webpage, and I need it to be justified center.

Please help with a css snippet that I can paste into the design manager file. Thank you!

EDIT:

I found that by adding this following snippet, it centers the module and adds the padding to the left and right. But no matter what I try, I can’t get it to be the same width as the rest of the page content.

.hs-tabs-wrapper {
 padding-left: 200px;
 padding-right: 200px;
}

[Victor_Becerra]

Hi @TaylorLioy
Thank you for reaching out to the Community!
I’d like to invite some community members who are subject matter experts to join this conversation.
@BarryGrennan @SteveHTM @Anton - Would you be able to share any insights on this? Your expertise would be greatly appreciated.
Best,
Victor

[FaramarKolivand]

You don’t really need to set padding-left and padding-right to 200px, that will break responsiveness on mobile devices (see attached screenshot).

Since you’re using Bootstrap, it’s better to avoid custom CSS for layout unless necessary. Instead, can you try updating the HTML of your tabbed card module by wrapping it in the following Bootstrap grid structure like below?

<div class="container">
 <div class="row">
 <div class="col-sm-12">
 <div class="hs-tabs-wrapper">
 <!-- Your tab content goes here -->
 </div>
 </div>
 </div>
</div>

This makes sure your tabbed content follows the same grid structure as the rest of your page, maintaining consistent alignment and spacing across all screen sizes, including mobile.

[TaylorLioy]

This worked, thank you!!

[Anton]

Hey @TaylorLioy,

adding padding isn’t a good idea in this case as @FaramarKolivand mentioned.

But since it seems to be an AI generated answer, because of “…since you’re using Bootstrap…” which is only partially right because, Yes, HS is build upon Bootstrap - but it’s using a modified version which is baked into HS and not really accessible, it’s not possible to just simply add a classic bootstrap layout with container>row>col or modify it without creating a custom module or template(s), here’s a better (and easier) way.

As I’d say the module is placed within a full-width section, I’d first check if this is the case.

To check this, check following:

1. Click on the “tree” icon in the icon sidebar (the one below the “plus”)
2. Look for the right section
3. Click on the 3 dots of the section and select “edit”

1. Open the “Alignment & Spacing” group and try the “Center content” option - without changing the value that will appear below.

1. Important - do this for the mobile version as well (click the mobile icon in the top center below the page name)

If this shouldn’t help, then you have to dive into CSS.

Here’s the code I’d do:

.hs-tabs-wrapper{
max-width:1140px;
margin:0 30px;
}

@media screen and (min-width:1024px){
 .hs-tabs-wrapper{
 margin:0 auto;
 }
}

Also - depending on your setup, I’d recommend to use HubL variables like

.hs-tabs-wrapper{
max-width:{{ theme.advanced.container_width ~ "px" }};
margin:0 {{ theme.advanced.col_gutter / 2 ~ "px" }};
}

@media screen and (min-width:1024px){
 .hs-tabs-wrapper{
 margin:0 auto;
 }
}

^ those variables are just examples and might not work.

If your theme is based on something like the Boilerplate, you can find those variables most likely in the theme-override.css and you should place your code in this as well.

Let me know if one of those options worked

best,

Anton

[FaramarKolivand]

I don’t use AI sir, and I am not really using the CMS feature of HubSpot for building web pages. I only inspected the web page in the post and noticed the other sections are wrapped with container > row > col- classes, that’s why I thought why not wrapping the tabbed section with the same Bootstrap grid classes, that’s all. But it’s good to know that HubSpot pages are built with Bootstrap.

[Anton]

Hey @FaramarKolivand,

My bad. Thank you for clearifying.

It reads like an AI generated text as it has a few and the Ai tester I’m using to get a “second opinion” stated that it’s 100% likely Ai generated. Sorry for that

best,

Anton

[kosalaindrasiri]

Hey @TaylorLioy,

In the scenario you described, you can center the module using the section editor, as @Anton explained clearly in his response.

Also, I usually apply the CSS style margin-inline: auto; in similar situations to achieve horizontal centering.

Hope this helps!

Regards,

[GRajput]

Hi @TaylorLioy

The padding you’ve added in the CSS—please remove that. Then, in your HTML code, add a <div> right after the <section> and give it the class name ‘container’. This should resolve the issue. We’ve already fixed it on our end and shared a screenshot as well, so you can refer to that. Also, we shared the screenshot of the right HTML code.

Even after applying the solution for the tab section, we noticed there are still alignment issues.

On checking further, we found that another section has some extra padding

in the CSS, which isn’t applied to the tab module. If you want consistent alignment across all sections, please refer to the CSS screenshot we shared and remove the padding styles from it.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!