Hi Elliott,

Thanks. Moving the modification to the child theme per your instructions worked.

Here’s the screenshot you requested: http://easycaptures.com/fs/uploaded/747/2557903229.jpg. The bug still exists after making the code change above, so I think it got introduced by the grid changes between 2.9.2 and 3.0.8.

In Firebug, the bug goes away if I disable the following style, but changing something this global would break a lot of other things in the theme:

* {
   box-sizing: border-box;
 }

So instead of doing that, I added this style in Firebug and was able to fix the issue:

.rotatingtweets, .rotatingtweet {
    max-width: 100%;
}

It seems like something is just causing the Rotating Tweets plugin to not play well with the recent theme updates. In general, it seems like the site’s grid columns are much narrower now than they were in 2.9.2 (really noticeable at larger resolutions like mine, 1920×1080). Is there a way to get the wider layout back?

I’ve updated my style.css on the FTP server with the above change. It should show up on the site shortly.

David

Looks like I found it here: Using web fonts in WordPress without using Cufon.

The site appears to be working now.

However, is there a way to make it so that I don’t have to do this after every theme update?

I’m using a child theme of Enfold, by the way.

Hi,

I plan to take my site live within the next several days. Just in case this thread gets closed, here is my “hack” fix to my child theme’s style.css as a guide to anyone else who has this problem.

This fix works as I intended for the layout elements that my site uses. My site doesn’t use every layout element. If you see any strange behavior with different elements’ widths, you may need to add special cases for its container or other properties of it as I have done for the blog and portfolio item grids below. In any case, I hope this is a good start for anyone else who encounters problems with the color sections’ widths.

.responsive .container {
    width: 100%;
}
.responsive .container .twelve.units {
    width: 100%;
}

/* other grid.css container widths needs to remain enforced */
@media only screen and (max-width: 479px) {
    .responsive .container .twelve.units .container, 
    .responsive #header_main .container,  
    .responsive .title_container .container, 
    .responsive #footer .container, 
    .responsive #socket .container, 
    .responsive #blog-masonry, .responsive_large .container.template-blog, 
    .responsive .error404 .container,
	.responsive #footer .widget p
        {
        width: 96%;
    }
    .responsive .av_slideshow_full .container, 
    .responsive .single-portfolio .container
	{
		width: 100%;
	}
}
@media only screen and (min-width: 480px) {
    .responsive .container .twelve.units .container, 
    .responsive #header_main .container,  
    .responsive .title_container .container, 
    .responsive #footer .container, 
    .responsive #socket .container, 
    .responsive #blog-masonry, .responsive_large .container.template-blog, 
    .responsive .error404 .container
	{
		/* Don't set this on sliders because that will put the captions in the wrong place, possibly offscreen */
        margin: 0 auto;		
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.responsive .container .twelve.units .container, 
	.responsive #header_main .container,  
	.responsive .title_container .container, 
	.responsive #footer .container, 
	.responsive #socket .container, 
	.responsive #blog-masonry, .responsive_large .container.template-blog, 
	.responsive .av_slideshow_full .container, 
	.responsive .single-portfolio .container,
	.responsive .error404 .container
	 {
		width: 428px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive .container .twelve.units .container, 
    .responsive #header_main .container,  
    .responsive .title_container .container, 
    .responsive #footer .container, 
    .responsive #socket .container, 
    .responsive #blog-masonry, .responsive_large .container.template-blog, 
    .responsive .av_slideshow_full .container, 
    .responsive .single-portfolio .container,
    .responsive .error404 .container
        {
        width: 682px;
    }
}
@media only screen and (min-width: 990px) and (max-width: 1139px) {
    .responsive .container .twelve.units .container, 
    .responsive #header_main .container,  
    .responsive .title_container .container, 
    .responsive #footer .container, 
    .responsive #socket .container, 
    .responsive #blog-masonry, .responsive_large .container.template-blog, 
    .responsive .av_slideshow_full .container, 
    .responsive .single-portfolio .container,
    .responsive .error404 .container
       {
        width: 910px;
    }
}
@media only screen and (min-width: 1140px) {
    .responsive .container .twelve.units .container, 
    .responsive #header_main .container,  
    .responsive .title_container .container, 
    .responsive #footer .container, 
    .responsive #socket .container, 
    .responsive #blog-masonry, .responsive_large .container.template-blog, 
    .responsive .av_slideshow_full .container, 
    .responsive .single-portfolio .container,
    .responsive .error404 .container
        {
        width: 1030px;
    }
}
@media only screen and (min-width: 1340px) {
    .responsive_large .container .twelve.units .container, 
    .responsive_large #header_main .container,  
    .responsive_large .title_container .container, 
    .responsive_large #footer .container, 
    .responsive_large #socket .container, 
    .responsive_large #blog-masonry, .responsive_large .container.template-blog, 
    .responsive_large .av_slideshow_full .container, 
    .responsive_large .single-portfolio .container,
    .responsive_large .error404 .container
        {
        width: 1210px;
    }
}

/* Portfolio grid entries need to be set back to the right position  */
/* Entries 1, 4, 7, etc., in the portfolio grid */
.grid-sort-container.grid-col-3 .grid-entry:nth-of-type(3n+1) {
    left: 0;
}
/* Entries 2, 5, 8, etc., in the portfolio grid */
.grid-sort-container.grid-col-3 .grid-entry:nth-of-type(3n+2) {
    left: 33.3333%;
}
/* Entries 3, 6, 9, etc., in the portfolio grid */
.grid-sort-container.grid-col-3 .grid-entry:nth-of-type(3n+3) {
    left: 66.6667%;
}

/* Keep first row of portfolio items from flowing onto a second row */
#homepage-portfolio .grid-sort-container {
    height: inherit;
}

#blog-masonry {
   margin: 0 auto;
}
 

Thanks,
David

Hi Ismael,

You don’t need to add the css modification for the color section, at least not until we find the actual issue. Is this still happening on many pages that you created? I mean the color section is still not fullwidth when you create a new page?

Yes, it still happens whenever I remove my CSS modification. Newest page here: http://amusementux.com/color-section-retest/.

If you have the time, please access the site’s database on phpMyadmin panel then look for the wp_postmeta table. Click Search then look for the post_id column, set the operator to = and the value to 559, click Go. 559 is the post id of the Color Section Test – all icon boxes are in color sections page. Please give us a screenshot of the result and the data inside the _aviaLayoutBuilderCleanData and _avia_builder_shortcode_tree meta_keys.

My site is on DreamHost, so the process was somewhat different. Here’s the screenshot: http://www.sendspace.com/file/8pzo7t. It doesn’t show the full values of those two keys, so I’ll add a private reply with that.

David

Hi Kriesi,

Thanks very much for looking into this. The core files are all still the same. The only change I’ve made that may be to any of them is to allow custom CSS classes to be added to any element (I used the method Dude described here). I was seeing this color section issue both before and after that change. It also still occurs if I delete my child theme’s style.css file using Firebug.

I just created a new FTP account for you and put its login information in a private reply.

I’ve built some pages in Chrome and other pages in Firefox. I’ve seen the issue occur in both.

My enabled Chrome extensions: ADB for debugging, Adobe Edge Inspect CC, Awesome Screenshot, Axure RP (2 versions), Dashlane, MaskMe, NoCoffee Vision Simulator, RescueTime, TweetDeck, and UserZoom Survey Tool.

Enabled Firefox add-ons: Abduction, Click&Clean, Dashlane, Firebug, FireShot, Skype Click to Call, and Web Developer.

Is there any other configuration information I could send you to help you look into this?

I could probably also take a Jing screencast showing how I set up a page. In short, most of my site’s pages are made up of several color sections which each contain columns inside them (similar to Drivott‘s layout).

Thanks,
David

I’m not seeing an issue in any of those layouts. The color section works exactly as intended and the layout is rendering exactly as intended on each.

Are we looking at the same thing? The two screenshots in this .zip show what I have: http://www.sendspace.com/filegroup/zOjPKYss4c6J%2F2Dq25CzfA.

The intended behavior you are describing makes sense if the color section is inside the column. Then the color section should only be as wide as the column is.

However, here, the column is inside the color section. If we have column 1, column 2, and column 3, and these are within a color section, I haven’t given any specific instructions regarding the width of the color section. I have not told the layout builder to change this. I would expect the color section to act the way the documentation describes: “Color Sections, LayerSliders, and Masonry elements will always be full width and can not be placed next to a sidebar or inside column elements.” Saying that cutting off the color sections’ widths is “exactly as intended” contradicts the documentation.

This is fundamentally an interaction design problem with implications in the software tool, not a purely software/web development problem (speaking as someone who has worked in both IxD and dev). In other words, if I want to make a color section that is only as wide as my columns (or 3 columns wide), I need to tell the layout builder that I want that.

But this is only a possible desired outcome, not a probable one. The probable outcome (as Heathcliffe and Flikk have asked for on this forum) is a full edge-to-edge color section. The tool should always be doing that consistently. I can’t really see anyone creating a color section that isn’t truly full-width, but in case anyone wants to, the color sections should have a preference that lets users make them as wide as possible or constrained to the columns. (Feature request for the ALB.)

What exactly are you expecting to happen, that you’ve seen in the theme demo or on another installation of the theme, that is not happening there?

I am expecting the color sections in the All test page to be as wide as my browser window. They are this wide in the Nested test page and your original test page.

The theme demo’s Landing Page has full-width color sections with columns inside them: http://kriesi.at/themes/enfold/pages/landing-page/.

Drivott (in the Enfold Theme Showcase) has the kind of layout I am trying to achieve: http://drivott.com/. Their homepage consists of full-width color sections with columns inside them. And it works as I expect.

• This reply was modified 10 years, 6 months ago by DalandanUX.

Ismael,

This reply is to your post here: https://kriesi.at/support/topic/background-images-dont-show-up-inside-content-sliders-slides/#post-273691.

In the other thread, you asked:

For example, you said that, “I found a possible solution, remove the first div class=”container” inside div id=”main””. Where exactly are you doing this modification?

Please see this post for the questions you are having: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-271618. I posted screenshots there of exactly what my changes were. Yesterday, another user reported the same problem I am having.

I didn’t modify any theme files other than my child theme’s style.css. All of the Enfold files are still the same. The problem is with the original theme, not with any modifications. Please read the previous posts in this thread for more details.

David

Hi Heathcliffe,

Thanks for reporting that you’re seeing the same problem on your site. It’s a relief to find out about someone else who is experiencing this. Can you try the steps below?

1. Install the Firebug browser extension if you don’t have it.
2. Open the page where you’re seeing the problem in Firebug.
3. Look for the first div class=”container” below div id=”main”. Depending on the page’s template, it may say div class=”container (more classes after this)”. As of version 2.8, most pages will have two divs with class=”container”, one inside the other. You’ll want to change the one that is immediately inside div id=”main”.
4. Change “container” in this line to “outer-container”, or just remove it (so that it says div class=””). (See the screenshots I posted here if you’re not sure what I did: https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-271618.)

Does this cause your site’s color sections to go to full width?

Thanks,
David

The third slide on this page: http://amusementux.com/why-ux-idea-2/.

It seems like a fluke to me. I just created a new page using Ismael’s shortcode approach above, and the color sections are not full width. The page is here: http://amusementux.com/about-4/ (requires kriesi-temp login to view).

I’ve uploaded some screenshots here: http://www.sendspace.com/filegroup/vCVZW1ipLb8I7S0Sv8SpaHcCPcqcz%2FuY. Files inside it include:

1. About4.PNG shows how http://amusementux.com/about-3/ looks now. No full-width color section.
2. About4-Firebug-Container.PNG shows how the page looks in Firebug without modifying any code.
3. In About4-Firebug-outer-container.PNG, the outermost container’s class is renamed to outer-container. The color section’s background is full width.
4. In About4-Firebug-NoContainer.PNG, the outermost container is removed (empty div). Same result as renaming the container.

The line of code I want changed is highlighted in all three of the Firebug screenshots above.

I am fine with removing or renaming the outermost container. Just need to know what changes to make in the template files.

Hi Ismael,

When you sign in with the temp administrator account that I created for the earlier post, you’ll be able to see the page here: http://amusementux.com/why-ux-idea-2/ (navigate to slide 3).

May I email you with the screenshot? I have a screenshot of a prototype, taken offline. I couldn’t find a way to make it work yet on the live site.

Yes, the color section widths are still a problem. I found a possible solution, which is to remove the first div class=”container” inside div id=”main”. Please see that thread (https://kriesi.at/support/topic/color-sections-arent-displaying-full-width/#post-268698) for more details and let me know there what we should do.

Thanks,
David

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

Hi Ismael,

Thanks. However, I knew about that already (please refer to my original post). This solution seems quite unreliable to me. My Homepage Test and your Homepage Test have the same contents, right? I am able to edit either of those pages using the Avia Layout Builder, yet yours is showing the full-width color sections and mine is not. I wasn’t able to use the regular editor on your page in visual or text mode to verify the shortcodes.

My Homepage Test page was built by adding one widget or row at a time and saving each new version. Each time, I verified that the color sections were still full width. When I made the theme’s homepage my Homepage Test page last week (right before my first post) the full width color sections stopped working and haven’t worked since on that page.

So, I’m also concerned about the maintainability of this solution going forward. I’m worried that whenever I have to update a page in the future, I will have to recreate the entire page or the color sections will break. I’d also lose the ability to revert to a previous revision of a page. This is too much work, and I haven’t had this problem with any other theme I have used.

Are we trying to work around a bug in the Avia Layout Builder here? Can this bug be fixed in the next update to the layout builder or the Enfold theme?

Thanks,
David