Margin issue when upgrading Avada themes (huge update from 3 to 5)

old-wine avada 3.x

I am helping a client migrate their wordpress site using the Avada theme. The theme had not been updated in years and was an update from 3.x to 5.x. Needless to say I had a ton of issues to resolve. My last and most puzzling one has to do with some margins, that should be simple, but are not…Note that Avada 3 did not use fusion builder (I think). Here are two snippets (one old and one new and their corresponding screenshots).

This is the snippet for the old column followed by the screenshot…this is how I need it to look.

[one_third last="yes"]
<div class="hppost hpblue">[title size="3"]<strong>New Products</strong>[/title][recent_posts layout="default" columns="1" number_posts="1" cat_slug="Featured Products" thumbnail="yes" title="yes" meta="no" excerpt="yes" excerpt_words="35" strip_html="true"][/recent_posts]</div>
[/one_third]

Now for the new snippet…obviously this uses the fusion builder

[fusion_builder_column type="1_3" layout="1_3" last="yes" min_height="" hover_type="none" link="" border_position="all"][fusion_text] <div class="hppost hpblue">[/fusion_text][fusion_title size="3"]<strong>New Products</strong>[/fusion_title][fusion_recent_posts layout="default" columns="1" number_posts="1" cat_slug="Featured Products" thumbnail="yes" title="yes" meta="no" excerpt="yes" excerpt_words="35" strip_html="true" /][fusion_text]</div> [/fusion_text][/fusion_builder_column]

here is a screenshot after the update…as you can see, this creates an unwanted margin above the image.

I have tried to modify all the relevant css components that I can think of, but I can’t seem to get it. The “box” is created by “hppost” and “hpblue” (there are other colors around the site) classes. Here is an excerpt of those…I’d appreciate any insights as I am out of ideas now.

    .post-content .hppost .title {
display:block;
width:100%;
padding:10px 0 2px;
margin:0px;
background:#377a7d;
}

.post-content .hppost .title h3 {
text-align:center;
padding:0px 0px;
background:none;
color:#ffffff;
margin:0px;
display:block;
width:100%;
}

.hppost {
background:#d7e4e5;
height:450px;
}

Read more here: Margin issue when upgrading Avada themes (huge update from 3 to 5)

Leave a Reply

Your email address will not be published. Required fields are marked *