CMS Development

gramirez
Contributor

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

I've been asked to "hardcode" the tabber content into each tab section. I have the first row completed (not sure if it's properly coded though as I'm new to web development). What I'm trying to do now is to make another row below similar to what I have already coded.
https://go.socialstudies.com/microcredentials-0
Screen Shot 2020-08-06 at 6.55.50 AM.pngScreen Shot 2020-08-06 at 10.39.04 AM.png   Screen Shot 2020-08-06 at 10.43.11 AM.png

<!-- ************ Embedded CSS ************ -->
<style>

.tabber_content_columns {
display: flex;
flex-wrap: wrap;
}
.thumb_prod_image {
width: 30%;
float: left;
}

.tabber_product_title {
font-size: 18px;
font-weight: bold;
}

.tabber_product_code {
font-size: 12px;
line-height: 25px;
}
.tabber_product_location {
font-size: 14px;
}

div.right-side-text {
float: initial;
margin-left: 180px;
}

</style>


<!-- ************ TABBER WRAPPER ************ -->
<div class="tabber-wrap blog-tabber">

<!-- ************ TABBER TABS ************ -->
<ul class="clearfix tabber-tabs">
<li class="active"><a href="#tab-1">Trifold Set</a></li>
<li><a href="#tab-2">Extra Flyers</a></li>
<li><a href="#tab-3">Landing Pages</a></li>
<li><a href="#tab-4">Videos</a></li>
</ul>

<!-- ************ TABS 1-4 CONTENT ************ -->
<div class="tabber-content">

<!--TAB 1-->
<div class="tab-pane active" id="tab-1">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 5 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL1</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL1_Grade 5 License\3Export\z_old</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6 License\3Export\z_old</div>
</div>
</div>

</div>




<!--TAB 2-->
<div class="tab-pane" id="tab-2">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Active Classroom Web Deliverable</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-BKLT</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-BKLT_Active Classroom Web Deliverable\3Exports</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Active Classroom_Poster</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKT01</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKT01_Active Classroom_Poster\MKT01_AC Poster\3Export</div>
</div>
</div>

</div>




<!--TAB 3-->
<div class="tab-pane" id="tab-3">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Active Classroom 2020</div>
<div class="tabber_product_code" style="flex-basis: 50%;"></div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_MARKETING\MKTPPT_Product Powerpoints\Active Classroom</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6 License\3Export\z_old</div>
</div>
</div>

</div>




<!--TAB 4-->
<div class="tab-pane" id="tab-4">
<!-- Left Column -->
<div class="span6 left-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Active Classsroom Explainer Video</div>
<div class="tabber_product_code" style="flex-basis: 50%;"></div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\Marketing\_Video\Active Classroom Explainer Video 2019</div>
</div>
</div>
<!-- Right Column -->
<div class="span6 right-tab-col">
<!-- Image -->
<div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://f.hubspotusercontent30.net/hubfs/3377481/Marketing%20Collateral%20Digital%20Catolog/Active%2...>
<!-- Text -->
<div class="right-side-text">
<div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div>
<div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div>
<div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6 License\3Export\z_old</div>
</div>
</div>

</div>




</div>

0 Upvotes
1 Accepted solution
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

Yea, row-fluid is the class Hubspot uses for rows so your page will be full of em. By putting .tabber-content in front of it it tells it to only effect the row-fluid class within elements with the tabber-content class.

CSSTricks is a pretty great knowledge resource. Here's a beginner's article on CSS selectors: https://css-tricks.com/how-css-selectors-work/ ; one on specificity: https://css-tricks.com/specifics-on-css-specificity/ ; and one on 'the cascade': https://css-tricks.com/the-c-in-css-the-cascade/

Hope these help!


If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

View solution in original post

6 Replies 6
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

You would want to wrap your columns in a div to create a 'row'. Then your next two items will be in a second row div.

<!--TAB 1-->
<div class="tab-pane active" id="tab-1">
<!-- ROW ONE --> <div class="row-fluid"> <!-- Left Column --> <div class="span6 left-tab-col"> <!-- Image --> <div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20Collateral/MKTAC-FLL1.png"> </div> <!-- Text --> <div class="right-side-text"> <div class="tabber_product_title" style="flex-basis: 50%;">Grade 5 License</div> <div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL1</div> <div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL1_Grade 5 License\3Export\z_old</div> </div> </div> <!-- Right Column --> <div class="span6 right-tab-col"> <!-- Image --> <div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20Collateral/MKTAC-FLL2.png"> </div> <!-- Text --> <div class="right-side-text"> <div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div> <div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div> <div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6 License\3Export\z_old</div> </div> </div> </div> <!-- ROW TWO --> <div class="row-fluid"> <!-- Left Column --> <div class="span6 left-tab-col"> <!-- Image --> <div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20Collateral/MKTAC-FLL1.png"> </div> <!-- Text --> <div class="right-side-text"> <div class="tabber_product_title" style="flex-basis: 50%;">Grade 5 License</div> <div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL1</div> <div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL1_Grade 5 License\3Export\z_old</div> </div> </div> <!-- Right Column --> <div class="span6 right-tab-col"> <!-- Image --> <div style="flex-basis: 50%;"><img class="thumb_prod_image" src="https://go.socialstudies.com/hubfs/Marketing%20Collateral%20Digital%20Catolog/Active%20Classroom%20Collateral/MKTAC-FLL2.png"> </div> <!-- Text --> <div class="right-side-text"> <div class="tabber_product_title" style="flex-basis: 50%;">Grade 6 License</div> <div class="tabber_product_code" style="flex-basis: 50%;">MKTAC-FLL2</div> <div class="tabber_product_location" style="flex-basis: 50%;">Z:\_PROJECTS-Proprietary\_Marketing\MKTAC_Active Classroom Sales Bundle\MKTAC-FL_Active Classroom Flyers\MKTAC-FLL_License Specific Flyers\MKTAC-FLL2_Grade 6 License\3Export\z_old</div> </div> </div> </div> </div>

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
gramirez
Contributor

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

I'm currently trying to control the spacing around each section (see attached). Please let me know how I should go about doing this. Thanks!Screen Shot 2020-08-07 at 7.38.05 AM.png

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

You'll just want to add some padding to the rows. If you're using the same class I used in my example add something like this to your CSS :

.tabber-content .row-fluid {
     padding: 1em;
}

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
gramirez
Contributor

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

Perfect! Thanks! I was having trouble with figuring out how to write my selector. Initially it was affecting a lot of other elements on the page. Are there any tips or links you could share on figuring out how to target elements with properly written selectors? Thanks!

0 Upvotes
alyssamwilie
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

Yea, row-fluid is the class Hubspot uses for rows so your page will be full of em. By putting .tabber-content in front of it it tells it to only effect the row-fluid class within elements with the tabber-content class.

CSSTricks is a pretty great knowledge resource. Here's a beginner's article on CSS selectors: https://css-tricks.com/how-css-selectors-work/ ; one on specificity: https://css-tricks.com/specifics-on-css-specificity/ ; and one on 'the cascade': https://css-tricks.com/the-c-in-css-the-cascade/

Hope these help!


If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
gramirez
Contributor

I need the tabber content on this page to have multiple rows, but it's not working.

SOLVE

Thank you so much! Yes, these links help a lot!

0 Upvotes