Hi Ismael and Devin,

I apologize in advance… long reply coming. I hope it helps. :-) I got to look at the diffs between your (Ismael’s) Homepage Test and mine:

1. The first color section has extra parameters in your version: video=” video_ratio=’16:9′.

2. The three placeholder-tall images on the homepage are aligned center in yours and left in mine.

3. The middle placeholder-tall image is animated top-to-bottom in yours and bottom-to-top in mine. I intend for just that image to be bottom-to-top.

4. Your color sections have shadow set to no-shadow. Mine are set to shadow.

5. More categories are included in the portfolio grid on mine.

6. Your homepage-widgets color section has an empty av_textblock at the top of it. (I think I saw this in my document’s layout later and removed it.)

7. The testimonial subtitles are different.

8. The title is empty on my version’s contact form because there is a custom h2 title above the form.

9. Small differences in the contact form like the to: email address and the label for Email address.

There are also these changes in the text between yours and mine, maybe because of edits I made to my document while working on the CSS:

1. There are no paragraph tags around some of your paragraphs. I’ve added some paragraphs that have their own CSS classes to mine. (I’m using the Disable WPAutoP plugin on my site.)

2. I’ve added icons above the 5 services buttons. (I have not uploaded the icon font yet, so they are not displaying.)

3. I switched the View our Portfolio button’s class from secondary-button to tertiary-button.

4. Under the Homepage – column 1 widget area, I added a textbox with a button for viewing more articles.

5-6. I added a class on the h3 for Why user experience design instead of web design?. I also split that textblock to put the button into a separate textblock.

7. I changed the testimonial widget’s header to be an h3 with its own class.

8. I added a Park/Company field to

The rest of the differences are just whitespace.

So, to sum up the shortcode diffs: I don’t see any differences that may affect the color section width other than the video parameters being added to yours.

Here are the differences in the full HTML for the two pages:

1. Their html_entry_id_ and avia_entry_id_ numbers are different.

2. Your page’s images and CSS are using Pagespeed to optimize them; mine are not – maybe because your page is currently my site’s homepage. Similarly, your version minimizes some CSS that the plugins have not externalized.

3. On yours, the Tipsy Social Icons CSS is within a <style> tag instead of a <link> tag.

4. The plugins’ scripts are imported in a different order.

5. Mine has a <link rel=’next’ …> tag.

6. Your page uses the .home class.

7. The breadcrumb trails are generated differently. Quite a bit of difference here, so please refer to the files’ HTML.

8. Mine has this between the breadcrumbs and the div id for homepage-hero:

<div class=’container_wrap container_wrap_first main_color fullsize’>
<div class=’container’>
<main class=’template-page content twelve alpha units’ role=”main” itemprop=”mainContentOfPage”>
<article class=’post-entry post-entry-type-page post-entry-354′ itemscope=”itemscope” itemtype=”http://schema.org/CreativeWork”&gt;
<div class=”entry-content-wrapper clearfix”>
<header class=”entry-content-header”></header><div class=”entry-content” itemprop=”text”>

9. The color section id’s in mine also contain classes like avia-builder-el-0, el_before_av_section, and avia-builder-el-first. These are also present in other things I built with the Avia editor, such as images.

10. There are <main> elements associated with each color section ID in yours.

11. My contact form uses a fieldset and classes like textare_label hidden textare_label_avia_message_2.

12. Yours has some obfuscated JavaScript toward the end, starting with var addComment.

I’ll continue looking into this to see if one element on the page seems to be causing the color section width to break. Firebug might show me this.

Was your version created after I upgraded to Enfold 2.7.1? Would I be able to resolve this issue by creating new documents with the latest version of Enfold?

Devin – Thanks. Right, I wasn’t going to change the raw shortcodes unless someone here instructed me to do that. I just turned on the debug mode long enough to do the diff above.

I’ve commented out the code for adding the debug mode. Feel free to turn debug mode back on if you need it for looking at this issue. Also, if you need them, I have saved files containing the shortcodes for both of our versions of Homepage Test. Could I email these to you?

Thanks,
David

Thanks, I want to use theme’s social icons as a widget, or adding to a page with a code block element. How can I do that? How can I use the code you typed?

Hi Ismael,
thank you for your reply.

q.1 This has fixed the logo placement thanks.
Regarding the social media icons I think logically the only design layout that works on a smartphone is to have the logo centred on the first row and then below a second row containing the menu button on the left followed by the social media icons to the right

Top row – Logo (center)
Second row – Menu button, facebook icon, twitter icon, etc.

q.2 Thanks, is there any way to adjust at what pixel width the mobile menu is activated (990px and 768px)

q.3 Thanks. I have done this with a photo of a runner in a green vest at bottom of page
http://terenure5mile.com/terenure-5-mile-race-2014/
and the video is opening in the lightbox perfectly.
In Firefox, Safari and IE it always darkens the background but in Chrome it only darkens the background on opening the video maybe 60% of the attempts. I am on Chrome Version 33.0.1750.152. Anything I can do to fix?

q. 4 I am on version IE10
the top image is overlapping into the Sidebar on top of the widgets.

The page in question now has Url http://terenure5mile.com/terenure-5-mile-race-2014/

Thanks for all your help

Thanks Yigit, that all worked perfectly!

I posted another question yesterday that you might have a look at.

https://kriesi.at/support/topic/sidebar-cutting-off-twitter-and-facebook-in-android/

Thanks, Denis

Yigit,

Thanks. The icon box is fixed. Please see the following issues with IE. This is IE version 9.0.8112.16421.
– header background
– dropdown menu background
– slide bullets and arrows
– social media icons (on fist load)

– Image sizing
– news icons (removed in quick css with “.image_size_widget .news-thumb { display: none; }”

Hi:

I suspect it has something to do with my child custom css here:

/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/* CBC CSS Changes */

/* Center Title of Portfolio Item */

.main_color .grid-entry-title {text-align:center;}

.main_color .iconbox_icon, .main_color .iconbox_top_icon {
background-color: #a81010 !important;
color: #ffffff !important;
border-color: #a81010 !important;
}

.iconbox_content_container {
font-size: 16px;
color: ;
}

.container_wrap.main_color.light_bg_color {
border: none !important;
}

.main_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

.alternate_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

li:hover .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx {
opacity: 1;
visibility: hidden;
}

/* Progress Bars */

.avia-progress-bar div.progress .bar {
background-image: none;
}

/* Enfold Map Plugin */

#top #main #map.avia-section .template-page {
padding: 0;
}
#map .container {
width: 100%;
padding: 0;
margin: 0;
}
#avia_google_maps-3.widget {
padding-bottom: 0 !important;
}
.map {
width: 100%;
}
#map .avia-builder-widget-area {
margin-bottom: -30px !important;
}

/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/

#header{
background-color: white;
}

#header_main .container, .main_menu ul:first-child > li a{ height:134px; line-height: 134px; }

/* Menu Dropdown Width */

.main_menu .menu ul { width: 160px; }

#top .main_menu {
right: 132px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
}

.social_header .phone-info {
float: right;
padding-top: 40px;
}

.hr span {
border-color: #BCBCBC;
}

#top .social_bookmarks {
padding-top: 30px;
float: right;
}

#header_meta {
margin-top: -30px;
}

.fixed_header.social_header #main {
padding-top: 117px;
}

/*Add your own styles here:*/

I cleared all out of quick css. Take note of the logo size if that makes a difference.

The last social #4 twitter is the only one that shows up.

Thanks

Chris

Hi Yigit!

Thanks alot for you help! CSS : Great stuff, really apreciate.
Regarding Social icons, the post you sent does not really fit my needs.
I’m looking forward to include social icons anywhere on a page or siderbar.
Do you think it could be done through widget or shortcode ?

I hope this is clear.

Best regards,
Jean-Hugues.

Hi Yigit-

Neither of those suggestions helped.

1. I added the quick CSS code but nothing changed. Please see the page http://worthyman.com/ and see the blog social icons. They are still off center as well as the bottom social media links.

2. I added that Widget but nothing changed on my home page. What I would like it to do is have a navigation sidebar on the right side of my homepage blog bottom – not the entire page sidebar. Please visit http://worthyman.com/ and scroll to the blog at the bottom.

T