Make Slideshow Bigger Than "Full Size"?

  • Unknown's avatar
    internationaltraumacenter · Member ·

    Hi there! Is it possible to make the slideshow bigger than “full size?” I’d like it to take up the entire width of the page, not just the center: https://internationaltraumacenter.wordpress.com

    Thanks so much!

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    How about something like this:

    @media only screen and (min-width: 1200px) {

  .home.singular.themes-sidebar1-inactive .main-content {
    max-width: 1140px;
  }
  .home h1, .home h2, .home h3, .home .content-area {
    max-width: 990px;
    margin: 0 auto;
  }

}

    What this does is enlarge the main column layout, then re-reduce everything below the slideshow to the original width, and it restricts all these changes to wider screens so the responsive styles on smaller devices isn’t affected.

    Let me know how it goes.

  • Unknown's avatar
    internationaltraumacenter · Member ·

    Hi there! Sorry for the delay, but I added this code to my CSS customizer and it unfortunately did not work. Could this be due to all the other CSS codes I already have? Here is what I already have; please let me know if something is being cancelled out or if this new code should have a particular placement/order:

    div.slideshow-window {
    background-color: inherit;
    border: none;
    }

    .singular.themes-sidebar1-inactive .main-content {
    margin: 0 auto;
    }

    .main .main-content article.post-singular .entry {
    padding: 0;
    }

    .masthead {
    z-index: 9;
    }

    div.slideshow-window {
    top: -85px;
    margin-bottom: -80px;
    }

    @media screen and (max-width: 600px) {
    .slideshow-window {
    top: -60px;
    margin-bottom: -45px;
    }
    }

    section.footer-wrap::after {
    content: ” | © 1994-2015 ITC / Dr. Robert D. Macy”;
    }

    .entry-title {
    text-align: center;
    }

    .masthead a.site-logo-link img, .masthead a.site-logo-anchor img {
    display: block;
    max-height: 120px;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I just put the code that @kathrynwp gave you into your CSS at the very bottom and it increased the size of the slideshow. It’s important that is at the very bottom of your CSS.

    When you say

    I’d like it to take up the entire width of the page, not just the center.

    are you wanting it to go from all the way to the browser window borders? If so, the post slider at the top of the theme is within the .main div with all the other content. That means that we have to use position: absolute; to make this happen and that means it will float above all the other page elements and not have any relationship with them so the rest of the elements will flow in behind it. We can of course adjust the position of those other elements, but on responsive themes such as Puzzle, that would require a number of Media Queries. When I’ve done this in the past, it has never worked cleanly and seamlessly.

  • Unknown's avatar
    internationaltraumacenter · Member ·

    Thanks so much! Got it, I think this width is ok, I’ll post again if I need more help. Thanks, everyone!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome and do let us know if you have additional questions or run into problems.

  • The topic ‘Make Slideshow Bigger Than "Full Size"?’ is closed to new replies.