[PeteGWebmaster]

Hi I’m having a problem with my featured content. I need each cell to be more wide so they fill the page. There is currently a gap on the right side of my featured content section that I’m trying to get rid of. This gap was created when I made the page full width. The URL is americanpowerins dot com and my current css codes are here:

.sidebar-header-right { display: none; }

.site {
    width: 100%;
}
#feature-slider .cycle-slideshow {
    max-width: unset;
    width: 100%;
}
#feature-slider img{
	width: 100%;
}
#featured-content.layout-four .hentry {
    width: 25%;
}
.catchresponsive-nav-menu {
    display: table;
    width: 100%;
}
.catchresponsive-nav-menu > li {
    display: table-cell;
  float: none;
}
.catchresponsive-nav-menu > li > a {
    display: block;
    text-align: center;
}
#search-toggle {
  	display: none;
}

 #main{
	width: 1100px;
}
#supplementary.four .widget-area {
    width: 25%;
.sidebar-primary {
    float: left;
    width: 88%;
}
}

@media screen and (min-width: 768px) {
     #main{
     width: 1100px;
	}}

[tikaram]

@petegwebmaster : Go to Appearance => Customize => Additional css and add the following css

@media only screen and (min-width: 1200px) {
#featured-content.layout-four .hentry {
	width: 25%;
}
}

Let me know if you need further assistance.

Regards,
Tikaram

[PeteGWebmaster]

What about increasing the size of the widgets at the bottom of losangeleswebdesignseo dot com so they fill the page in a similar fashion? Because the site is now full width I’m missing a code to enlarge bottom widgets. These are my current codes:

.site {
    width: 100%;
}
#feature-slider .cycle-slideshow {
    max-width: unset;
    width: 100%;
}
#feature-slider img{
	width: 100%;
}
#featured-content.layout-four .hentry {
    width: 25%;
}
.catchresponsive-nav-menu {
    display: table;
    width: 100%;
}
.catchresponsive-nav-menu > li {
    display: table-cell;
  float: none;
}
.catchresponsive-nav-menu > li > a {
    display: block;
    text-align: center;
}
#search-toggle {
  	display: none;
}

 #main{
	width: 1100px;
}

@media only screen and (min-width: 1200px) {
#featured-content.layout-four .hentry {
	width: 25%;
}
}

.site-content {
    background-color: rgba(27, 27, 27, 0.9);
}

#site-logo, #site-branding {
    text-align: center;
    width: 100%;
}

[tikaram]

@petegwebmaster : Go to Appearance => Customize => Additional css and add the following css

@media only screen and (min-width: 1200px) {
#supplementary.four .widget-area {
	width: 25%;
}

Regards,
Tikaram

[Author]

Posts