Title: Display full width
Last modified: August 21, 2016

---

# Display full width

 *  Resolved [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/)
 * new.mysundaydress.com
 * Hello! How can I display this width to fit the full width of the page?
 * [https://wordpress.org/plugins/simple-instagram/](https://wordpress.org/plugins/simple-instagram/)

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Plugin Author [mr_speer](https://wordpress.org/support/users/mr_speer/)
 * (@mr_speer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877959)
 * Hello!
 * In order to display the images full-width, you’ll need to do a few things. First,
   you’ll want to make sure you’re pulling in the largest image size in your shortcode/
   widget.
 * Then, you’ll need to add a couple rules to your CSS, first on the `.si_item`,
   and then on the `img` within the `.si_item`:
 *     ```
       .si_item{
          width: 100%;
          max-width:100%;
       }
       ```
   
 *     ```
       .si_item img{
          width: 100%;
       }
       ```
   
 * One word of warning – depending on how wide your page is, there’s a good chance
   that making the images full-width will cause them to be pixelated as they aren’t
   big enough to naturally fill the whole screen. If you’re finding that to be the
   issue, you could instead make them their maximum width and center them on the
   page. So if the images are 600px:
 *     ```
       .si_feed .si_item {
          float: none;
          width: 600px;
          max-width:100%;
          margin: 0 auto;
       }
       ```
   
 *     ```
       .si_item img{
          width: 100%;
          max-width: 100%;
       }
       ```
   
 * Hopefully that’ll get you pointed in the right direction.
 *  Thread Starter [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877963)
 * For some reason that stacks all the items one on top of each other?
 *  Plugin Author [mr_speer](https://wordpress.org/support/users/mr_speer/)
 * (@mr_speer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877964)
 * Ah my apologies, I think I misunderstood what you were asking for.
 * Are you wanting the feed itself to stretch all the way across the page?
 *  Thread Starter [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877965)
 * Oh I just realized I wasn’t clear in my question! I meant that I wanted them 
   to stay the same size and be similar to how you have them laid out, but that 
   the items would all together span an entire row, so that it would fit more on
   each row and go from one end of the page to the other with no spaces on the left
   or right. I am trying to do something similar to the bottom of this page… [http://www.garypeppergirl.com](http://www.garypeppergirl.com)
 *  Thread Starter [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877966)
 * Thank you so much for your time, I am excited to use your plugin, this is just
   the last thing keeping me from having it exactly how I imagine! 🙂
 *  Plugin Author [mr_speer](https://wordpress.org/support/users/mr_speer/)
 * (@mr_speer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877972)
 * No problem!
 * So I think after looking at how your page is set up, you’ll first have to make
   sure that you have the shortcode in one of the “section-full-width” areas. I’m
   not familiar with your theme in particular, but that will allow the area to stretch
   across the entire page.
 * Then you’ll just want to figure out how many items you want per row and set them
   to the proper percentage in order to flow onto one line. So, for instance, if
   you wanted 10 per row, you’d set the .`si_items` to:
 *     ```
       .si_item{
         width: 10%;
        }
       ```
   
 * Which would make rows of 10 items each.
 *  Thread Starter [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877973)
 * I think we are heading in the right direction but it appears that it’s constraining
   the widget to a box 1032px wide, so when I say 10% it’s only filling 10% of that
   box not the entire width of the page. Maybe it’s a div? Not sure where that number
   is set?
 *  Plugin Author [mr_speer](https://wordpress.org/support/users/mr_speer/)
 * (@mr_speer)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/display-full-width/#post-4877974)
 * Hmm yes so it appears that it’s constrained within a div with a class of “section-
   boxed”. I’m not entirely sure where you’d change that, but you’ll need to change
   that section to a full-width section in order for it to span the entire page.
 * For instance, the area right above it with “Title – subtitle” is in a full-width
   box.
 *  [meowette](https://wordpress.org/support/users/meowette/)
 * (@meowette)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878095)
 * Hey Joelle, I see that you figured this out on your site! It looks great. How
   did you accomplish this?
 *  Thread Starter [joellejanigian](https://wordpress.org/support/users/joellejanigian/)
 * (@joellejanigian)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878096)
 * Hey! This is what ended up working for me…
 * .si_item{
    width: 10% !important; }
 * .section-full-width.section-custom .section-boxed {
    max-width: 100%; margin:
   0px !important; border:0px !important; padding: 0px !important; }
 *  [The United](https://wordpress.org/support/users/the-united/)
 * (@the-united)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878107)
 * Hey Mr_speer Where do i need to add the above code?
 *  Plugin Author [mr_speer](https://wordpress.org/support/users/mr_speer/)
 * (@mr_speer)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878109)
 * You’ll want to put it in your style.css file.
 *  [The United](https://wordpress.org/support/users/the-united/)
 * (@the-united)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878110)
 * [@mr_speer](https://wordpress.org/support/users/mr_speer/) Thank you for responding,
   but I have tried that and have gotten no response to the full width action

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Display full width’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/simple-instagram_dbdbda.svg)
 * [Simple Instagram](https://wordpress.org/plugins/simple-instagram/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/simple-instagram/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/simple-instagram/)
 * [Active Topics](https://wordpress.org/support/plugin/simple-instagram/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/simple-instagram/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/simple-instagram/reviews/)

 * 13 replies
 * 4 participants
 * Last reply from: [The United](https://wordpress.org/support/users/the-united/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/display-full-width/#post-4878110)
 * Status: resolved