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

SOLVE
Highlighted
Regular Contributor

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>

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Advisor | Elite Partner

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!


Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

6 Replies 6
Highlighted
Advisor | Elite Partner

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>

Alyssa Wilie

Web Developer at LyntonWeb

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

Highlighted
Regular Contributor

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

Reply
0 Upvotes
Highlighted
Advisor | Elite Partner

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;
}

Alyssa Wilie

Web Developer at LyntonWeb

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

Reply
0 Upvotes
Highlighted
Regular Contributor

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!

Reply
0 Upvotes
Highlighted
Solution
Advisor | Elite Partner

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!


Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

Highlighted
Regular Contributor

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

Reply
0 Upvotes