Full Width Content (Not Just Images)

Thanks for using Tracks!

Sure, if you share a link to a post with the slider, I can provide you with the CSS to make it fill the width of the page.

You’re welcome Ben, I love the theme!

I am currently testing it here: https://nabeelsyed.com/test

This is different from the slider. I have a plugin called Unite gallery lite, and they have an option for full-width that I enabled but I think the theme is limiting its size.

I want the gallery to span full-width so I can use it as a viewer for my photographs.

Alternatively, I am also considering if I want the gallery to be near full-width instead of full-width, having maybe a 5% of the window width as padding around just for aesthetics. If its not too much to ask could you also tell me where to edit the code so I can control how much of a padding is around the gallery? Perhaps we can combine both into one function where if I set it to “0” it goes to full-width and etc.

Okay the gallery is using a lot of Javascript to create it’s layout which is making it very difficult to update the styling.

How do you feel about making the entire post content container much wider? You can do this easily with the following CSS:

.entry-container {
  padding: 0 5% !important;
}
.entry-content img.full-width {
  width: 111.2% !important;
  left: -5.6% !important;
}

You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

Let me know what you think about that.

Hey Ben, I thought about that originally. The only issue is that it impacts ALL of my content that way, including blog posts and then the blog posts text runs into the sidebar categories. I only want there to be no padding on that specific page.

What if I edit create a copy of the content-page.php and edit the CSS in there and then use it as a template for the page?

I am wondering if there is a simpler solution?

Also, thank you for your prompt responses you are incredibly helpful!

Okay I’ve got an idea. I’m going to post some CSS below that will make any element with the class “full-width” within a post the full-width of the post:

.entry-content .full-width {
  position: relative;
  width: 113%;
  left: -6.5%;
}

@media all and (min-width: 43.75em) {

  .entry-content .full-width {
    width: 128.6%;
    left: -14.3%;
  }
}
@media all and (min-width: 56.25em) {

  .entry-content .full-width {
    width: 150%;
    left: -25%;
  }
}
@media all and (min-width: 68.75em) {

  .entry-content .full-width {
    width: 163.6%;
    left: -31.8%;
  }
}
@media all and (min-width: 75em) {

  .entry-content .full-width {
    width: 179.9%;
    left: -39.95%;
  }
}

The code is a bit tedious because Tracks post content width updates so many times.

Once you add that, all you have to do is put any content you want to be the full width of the post container within a div with that class like this: https://pics.competethemes.com/image/2a2w3q0K443H

That will work with shortcodes and any type of content.

That did the trick!

Thank you so much Ben, you’re amazingly helpful ??

Resolved.

Great! No problem ??