Home Page Slider not Responsive

Support Area Forums Umami Home Page Slider not Responsive

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://1fe.967.myftpupload.com/
  • Author
    Posts
  • #32367
    Susan Schreiner
    Participant

    Hi Bill –

    I promise this is the last question (for today)…

    Starting test driving the site on an iPad and the Home Page slider photos are not responsive. I don’t know if the custom CSS code we’ve put in somehow overrode this or not. I’ve included that code below. Otherwise if there is a setting I’ve missed – I’m just not seeing it.

    Thank you.

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

    .slicknav_menu {
    display: none;
    }

    #sidebar {
    z-index: 20;
    }

    ul#primary-menu {
    display: block;
    list-style-type: none;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    }

    ul#primary-menu a {
    display: block;
    padding: 5px;
    }

    ul#primary-menu li {
    position: relative;
    }

    ul#primary-menu li.current-menu-item a,
    ul#primary-menu li.current-menu-item li a:hover,
    ul#primary-menu li a:hover { color: #454545;
    background-color: #FFFFFF;
    }

    ul#primary-menu li.current-menu-item li a {
    background-color: transparent;
    }

    ul#primary-menu li ul {
    display: none;
    list-style-type: none;
    }

    ul#primary-menu li:hover ul {
    display: block;
    position: absolute;
    left: 200px;
    top: 0;
    width: 180px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    }

    body #sidebar {
    background-color: rgba(240,89,37,1);
    }

    .menu-title h3 {
    color: #ffcc33;
    font-size: 18px;
    }

    li.menu-group-item p {
    color: #ffffff;
    font-size: 14px;
    font-style: italic;
    }
    #header {
    position: relative;
    }

    .gm-style { color: #000 !important; }

    #32374
    Bill Robbins
    Moderator

    Hey Susan,

    I took a quick look. It does appear that they are responsive (they change based on the screen size). You can drag your browser’s sizing spot to make it bigger or smaller to see it change.

    The theme works best when the images are set to always fill the background. That way there is no letter boxing of the images.

    Adding text to the background images is always a bit tricky. The can end up beneath the sidebar for example. What I would do is keep them rather square in layout and close to the center. You’ll want them a bit to the right so they have room for the sidebar. That usually works best.

    Have a great week,
    Bill

    #32379
    Bill Robbins
    Moderator

    Hi Susan,

    If you’ll look in the Background tab of the theme options page you’ll find some fit options for the slider background. I debated even including these in the theme. Personally I believe they work best when the fit vertically and fit horizontally are set to “no” and the minimum height and width is set to 0. That will allow cropping, but it’ll also ensure that the background image fills the screen.

    Take care,
    Bill

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Home Page Slider not Responsive’ is closed to new replies.