Create "full screen" portfolio?

Hi! Great props to this awesome theme. I am a Wordpress newbie, so getting a great theme to start is truly the right way to get things going!

I am trying to insert a full screen responsive gallery. I searched the colorless forums for fixes that you posted and this one seemed the closest to what I am trying to achieve:

@media (min-width:1200px){
  .container.main-content-area{
    width:1370px;
  }
}

.single-featured {
  width: 100%;
}

Not sure what I am doing wrong, but when I insert the Jetpack gallery, it still is cropping off short. Is there a way to get a true full screen gallery to work with this theme? Here is the url to the page I am working on:

Any leads would be greatly appreciated! Thank you again for this awesome theme and support.

I have decided to throw in the bucket and move forward with a paid theme that already has a full screen responsive gallery. I think modifying the plugin to fit would be more than I can handle.

If you could still reply to my inquiry, I would appreciate it. Knowledge is power and we can all move forward and keep pushing technology!

I need to see Sparkling theme enabled on your website, so I can help you with this. If you have gallery working then it is not difficult to make it full width but like I said, it would be nice to see your setup, so we can work from there.

Hi Aigars,

Thank you for your prompt response. I changed the theme back to the Sparkling theme. Any assistance is greatly appreciated.

Best!
Mark

You can use code like this to make content area even wider for larger devices.

@media (min-width:1200px){
 .container.main-content-area{
  width:100%;
}

.single-featured {
  width: 100%;
}

However, this won’t make your images larger because they are cropped to 480px by 320px. You need to resize those images via plugin you are using to add those images on your page. Can’t help with this part as this functionality looks like a part of this other theme.

For Sparkling demo I am using Jetpack and you can see results here.

Thanks Aigars! Its better, but it appears to still not be full width and have some padding on the ends. Any ideas?

I understand about using the Jetpack gallery, however the a full screen responsive gallery approach was preferred.

Thank you for your assistance!

Add this to Theme Options - Other - Custom CSS. it will reduce padding.

.home .post-inner-content {
    padding: 0;
}

Let me know if this helps.

Thanks Aigars!! Looks great!!

Full-screen solved, is there a way to get back a secondary page (like the default page) but without the sidebar with regular page width? I searched your other posts and I know you resolved this problem with other members, but when I inserted the code, it doesn’t work. Is it because the code you wrote to help make my homepage gallery full width also affected the secondary page? Sorry!

Here is the page in question to make default width instead of full width:
http://lucyjunus.com/wp/press_spk/

Here is the custom CSS I have so far to do the following:

  • change inner content block to light yellow
  • expand page to true full width
  • remove additional padding for full width page
  • remove header and footer
  • remove sidebar on pages

Custom CSS:

.post-inner-content {
  background-color: #fffcc;
}
@media (min-width:1200px){
 .container.main-content-area{
  width:100%;
}
.single-featured {
  width: 100%;
}
.home .post-inner-content {
padding: 0;
}
.home .page-header {
    display: none;
}
.single #secondary {
    display: none;
}
#secondary {
    display: none;
}
.main-content-inner.col-sm-12.col-md-8.pull-left {
    width: 100%;
}

There are several errors in your code, so try to use it like this instead. Also I have made necessary tweaks, to fullscreen is used only for homepage and not other pages.

.post-inner-content {
  background-color: #ffc;
}
@media (min-width:1200px){
 .home .container.main-content-area{
  	width:100%;
	}
}
.single-featured {
  width: 100%;
}
.home .post-inner-content {
	padding: 0;
}
.home .page-header {
    display: none;
}
.single #secondary {
    display: none;
}
#secondary {
    display: none;
}
.main-content-inner.col-sm-12.col-md-8.pull-left {
    width: 100%;
}

THANKS AGAIN AIGARS!! Same as before, your help worked like a charm!