Color sections aren't displaying full-width

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,

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