Icon on Right of List

jgoodhoofd · October 2014

http://themes.muffingroup.com/be/app/

Right below the slider on that demo there's a 6 icon list. The 3 items contained within the 1/2 half on the left have icons on the right of the text, instead of the left. How do I copy that?

Albert · October 2014

For this section we used 2 "Column" items. On the left side we used below code:

[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_1.png" title="Calculator" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]
[divider height="30"]
[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_2.png" title="Easy Payments" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]
[divider height="30"]
[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_3.png" title="Virtual Wallet" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]

but on right below shortcodes:

[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_4.png" title="Calendar" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]
[divider height="30"]
[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_5.png" title="Mobile Phone" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]
[divider height="30"]
[list image="http://themes.muffingroup.com/be/app/wp-content/uploads/2014/09/home_app_list_icon_6.png" title="Professional Charts" style="2"]Amperdiet nisi. Proin condimentum fen uncrelaner  etiam pharetra, erat sed fermentum feugiat,mauris egestas[/list]

And also at the bottom of page, in custom CSS field, we used below css:

#features .one-second:nth-child(2) .list_item .list_left { float: right; }
#features .one-second:nth-child(2) .list_item .list_right { margin-left: 0; margin-right: 100px; text-align: right; }

jgoodhoofd · October 2014

Adding columns adds some odd borders and backgrounds to the area and I also can't seem to get the icons on the left to align to the right - the custom CSS isn't working.

Could you please provide the whole code for that App page? Perhaps I'd be able to get it to work to see how you used columns and what not.

Albert · October 2014

If you want the whole code for Be|App page, please take a look at http://forum.muffingroup.com/betheme/discussion/1064/how-to-re-create-one-of-full-demo-pages-betheme-demo-data where we described everything. Just upload content for this demo and you will get all necessary components.

jgoodhoofd · October 2014

I followed your example with the 2 columns items, and this is the result:

http://oakvillecounselling.com/01oc/approach/

I don't think the #features .one-second:nth-child(2) is targeting the list items. Thoughts? Help?

Albert · October 2014

Sorry but we have no thoughts what else could be the problem in your case because we described everything above and this works on 100%. But if somehow it is not ok on your side, we recommend to import whole page where we did this item and maybe this will help you a lot.

Thanks for understanding!

Icon on Right of List

Comments