Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

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

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

4 Answers

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

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

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

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

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

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

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