Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Gabriel Corral
Gabriel Corral
448 Points
Posted by Gabriel Corral
Gabriel Corral
448 Points

Need help with a height resize based on window orientation.

Hey there, Im a bit stuck, Im trying to create a design for my portfolio page that will dynamically change based on the window size. Width scaling is no problem but I cant for the life of me figure out what jquery would solve the height issue. The idea is for the page to have a white border around the main content (using slidesjs due to simplicity) and for the slide image to scale length or height wise based on orientation. Any help would be greatly appreciated as Im no coding expert.

Gabriel Corral
Gabriel Corral
448 Points
Gabriel Corral
Gabriel Corral
448 Points

Source code and example can be viewed here: http://gcorraldesigns.com/

4 Answers

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Have you tried using media queries to make elements responsive depending on the device width this may help you solve the issue.

Gabriel Corral
Gabriel Corral
448 Points
Gabriel Corral
Gabriel Corral
448 Points

Im using them a bit perhaps I need to toy around with them a bit more to see if I can apply it to the document height as well. Heres what im working with so far.

'''css

/* For tablets & smart phones */
@media (max-width: auto px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
    max-height: 100%;

  }


.container {
  margin: 0 auto
  padding-top:70px;
  padding-bottom:70px;
  padding-left:70px;
  padding-right:70px;
        max-height: 100%;

  }
}

/* For smartphones */
@media (max-width: 480px) {
  .container {
    width: auto
            max-height: 100%;

  }
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: auto px) {
  .container {
    width: auto px

  }
}

/* For larger displays */
@media (min-width: 1200px) {
  .container {
    width: auto px
  }
}'''
Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Or check out this post it demonstrates using CSS to control a background image but maybe you could use the same concepts in your design

Gabriel Corral
Gabriel Corral
448 Points
Gabriel Corral
Gabriel Corral
448 Points

Look very promising, if I can tweak it to run SlidesJS it might work nicely.

Anthony Hind
Anthony Hind
5,715 Points
Anthony Hind
Anthony Hind
5,715 Points

Hi Gabriel, just looking at the slide.js docs have you tried controlling the slider with the JS functions 

$(function(){
  $("#slides").slidesjs({
    width: 700,
    height: 393
  });
});
Gabriel Corral
Gabriel Corral
448 Points
Gabriel Corral
Gabriel Corral
448 Points

Hmm doesn't appear to have the same functionality, I'll keep chiseling away at it there has got to be some way to do it.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You've got quite a bit of code there. I'd suggest you create a reduced test case and put it up on codepen.