[Feature list item on splash demo page]

CesarMendocilla

I need to implement a list of images and text that appears on your homepage, I can not find how to do it

attached image

Albert

Hi,

for those elements we used "Column" item with below html code:

<div class="splash_feature">
    <a target="_blank" href="http://themes.muffingroup.com/betheme/home">
        <div class="photo"><img class="scale-with-grid" src="http://themes.muffingroup.com/betheme/wp-content/uploads/2014/07/splash_feature_36.png" alt="" /></div>
        <div class="desc">
            <div class="t"><div class="c">
                <h4>Online documentation and videos</h4>
                <p>Especially for your needs, we created on-line documentation. Now it will be much easier and faster to find informations that you need to create amazing website.</p>
            </div></div>
        </div>
    </a>
</div>

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

CesarMendocilla

insert the code and it looks like the attached image - missing some custom css?

Albert

Ok, you're right. We forgot about css. Below you have custom css for that items:

.splash_feature a { display: block; overflow: hidden; padding: 20px; color: #8d8d8d; background: rgba(0,0,0,.01); }
.splash_feature a:hover { background: rgba(0,0,0,.04); }
.splash_feature .photo { float: left; width: 46%; line-height: 0; }
.splash_feature .desc { float: left; width: 48%; margin-left: 6%; }
.splash_feature .desc .t { display: table; }
.splash_feature .desc .t .c { display: table-cell; vertical-align: middle; }
.splash_feature .desc p { margin: 0; }

@media only screen and (min-width: 1240px) { 
    .splash_feature .desc .t { height: 194px; }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

BrightSky

Many thanks