# Content box width

**URL:** <https://colorlibsupport.com/t/content-box-width/6139>\
**Category:** Sparkling\
**Created:** [August 22, 2014, 4:50pm UTC](https://colorlibsupport.com/t/content-box-width/6139 "2014-08-22T16:50:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mabs77](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/5daacb/32.png) [@mabs77](https://colorlibsupport.com/u/mabs77)\
**Post date:** [August 22, 2014, 4:50pm UTC](https://colorlibsupport.com/t/content-box-width/6139/1 "2014-08-22T16:50:05Z")

</div>

1. How can I make content and side boxes wider and less space in between?
2. How can I use image carousel within content box of a page? This carousel need to show different images on every page with their own set of images.

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [August 23, 2014, 2:06pm UTC](https://colorlibsupport.com/t/content-box-width/6139/2 "2014-08-23T14:06:22Z")

</div>

1. This code will make the entire content area 100px wider. You can make it even wider if you want to.

```auto
@media (min-width: 1200px) {
    .container {
        width: 1270px;
    } 
}

```

Add this code to Theme Options - Other - Custom CSS.

1. Slider that comes with theme is not meant to work that way and you will have to use some slider plugin. Any slider plugin should work with this theme. It depends on which one you like the best.

---

<div class="post-metadata">

**Author:** ![mabs77](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/5daacb/32.png) [@mabs77](https://colorlibsupport.com/u/mabs77)\
**Post date:** [August 23, 2014, 10:39pm UTC](https://colorlibsupport.com/t/content-box-width/6139/3 "2014-08-23T22:39:40Z")

</div>

Thanks for the prompt answer for 1. It does work very nicely with full width page template.

If I wanted to use side bar (left) and wanted to change width of side bar and content and remove space between them what do I need to change?

for 2 I have researched and liked Tiny carousel horizontal plus.

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [August 24, 2014, 7:49am UTC](https://colorlibsupport.com/t/content-box-width/6139/4 "2014-08-24T07:49:40Z")

</div>

1. Code given above will work for left/right sidebar or full width page. It is general solution and applies to everything.

To change the gap between those elements there is only hacky solution which is never recommended. Bootstrap itself dictates those paddings and margins and there is no clean way to eliminate them

You can use code like this (only if you use left sidebar)

```auto
.main-content-inner.col-sm-12.col-md-8 {
    padding-left: 0;
}
.widget-area.col-sm-12.col-md-4 {
    padding-right: 0;
} 

```

If you want to make sidebar narrower then you have to change all classes for content and sidebar from `.col-md-8` to `.col-md-9` and from `.col-md-4` to `.col-md-3`. These changes should be made in `header.php` file and `sidebar.php`

---

<div class="post-metadata">

**Author:** ![thiagosartorelli](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/t/e19b73/32.png) [@thiagosartorelli](https://colorlibsupport.com/u/thiagosartorelli)\
**Post date:** [October 29, 2014, 7:39pm UTC](https://colorlibsupport.com/t/content-box-width/6139/5 "2014-10-29T19:39:58Z")

</div>

Hi Aigars,

On header.php i change `<div id="content" class="main-content-inner col-sm-12 col-md-8 pull-left">` to `<div id="content" class="main-content-inner col-sm-12 col-md-9 pull-left">`

and my sidebar from `<div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary">` to `<div id="secondary" class="widget-area col-sm-12 col-md-3" role="complementary">`

but in the full width pages the sidebar area still there, with no sidebar. When i change back to col-md-8 the full width goes 100% as expected. Why? Where i change to get my full width pages 100% on col-md-9 layouts?

Thank you