CSS help! I'm trying to create margin or padding, but it's not coming out correctly.
I'm trying to control the margin or padding around these elements. Here is the code I currently have on the page. https://go.socialstudies.com/microcredentials-0
<!-- ************ 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: 14px;
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">
<!-- 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%20C...">
</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%20C...">
</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%20C...">
</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%20C...">
</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>
<!--TAB 2-->
<div class="tab-pane" id="tab-2">
<!-- 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%20C...">
</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%20C...">
</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>
<!--TAB 3-->
<div class="tab-pane" id="tab-3">
<!-- 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%20C...">
</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%20C...">
</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>
<!--TAB 4-->
<div class="tab-pane" id="tab-4">
<!-- 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%20C...">
</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%20C...">
</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>
</div>
CSS help! I'm trying to create margin or padding, but it's not coming out correctly.
Hey @gramirez
Thank you for the information provided. I'll tag a few experts.
Hey @DanielSanchez @alyssamwilie @daveroma what would you advise @gramirez ?
Thanks
Sharon
 | Did you know that the Community is available in other languages? Join regional conversations by changing your language settings ! |
CSS help! I'm trying to create margin or padding, but it's not coming out correctly.
CSS help! I'm trying to create margin or padding, but it's not coming out correctly.
Hey @gramirez
Could you please share how you resolved it?
Thanks
Sharon
| Did you know that the Community is available in other languages? Join regional conversations by changing your language settings ! |
