Display full width

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.

For some reason that stacks all the items one on top of each other?

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?

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… https://www.garypeppergirl.com

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! ??

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.

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?

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.

Hey Joelle, I see that you figured this out on your site! It looks great. How did you accomplish this?

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;
}

Hey Mr_speer Where do i need to add the above code?

You’ll want to put it in your style.css file.

@mr_speer Thank you for responding , but I have tried that and have gotten no response to the full width action