This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Images in tabs not responsive

  • Creator
    Topic
  • #23095
    redswirl
    Participant

    Hi, first off just want to say the more I work with this theme the more impressed I am. Great work

    Little problem for me: I have placed images in the tabs. Please see link to see what I mean:

    http://wenpro.redswirldesign.co.za/products2/

    I would have expected the tabs and images to be responsive rather than jumping to the next line when the window is resized. Is there a way of doing that?

    Many Thanks
    Vernita

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #23102
    Jason Bobich
    Keymaster

    Hello Vernita,

    What you’re seeing there is the responsive behavior. When you get down to the mobile viewport size, the columns begin to stack. This is a fairly common approach to handling responsive layouts.

    This is also what you see happening with the main layout of your site. For example, take a page like this on your site with a sidebar. Once you get down to a certain viewport size, the sidebar eventually stacks below the main content of the site. If this didn’t happen, then the layout would look really cluttered on the mobile viewport.

    So, your columns in your tabs have this same behavior. They’re 22% width floated columns, until you get down to 767px viewport (mobile), and they are changed to 100% width, with no float — i.e. they “stack.”


    To change this would be a CSS customization you’d need to make. It’d be fairly straight forward. From your custom CSS just style the columns to always be floated left with a 22% width.

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

    .grid_3 {
        width: 22%;
    }
    .column {
        float: left;
        margin-right: 4%;
    }

    But I think you’ll find that you get something that isn’t all that readable, and a bit cluttered.

    #23122
    redswirl
    Participant

    Hi Jason, thank you for the very thorough reply.

    I might be missing something but it looks to me as if it starts stacking at 1024px, I would have liked it to start stacking when the viewport is smaller – 767 would be great.

    Thanks
    Vernita

    #23123
    Jason Bobich
    Keymaster

    As I described previously, this should already be the case, and what I’m seeing on my end. Here’s a screenshot at 768px, 1px before the columns begin to stack (screenshot is in chrome).

    #23126
    redswirl
    Participant

    this is a screenshot when I resize the browser to 1017px. The last tab is dropping off.

    http://postimg.org/image/4wq4bilr3/

    #23127
    Jason Bobich
    Keymaster

    Aw, we’re talking about two completely different things. I was talking about your columns within the tabs, and I think you’re talking about the tab navigation items themselves, where you’ve applied code customization to have the fruit images?

    The tabs are not percentage-based. By default, they’re just blocks of text. So, if they don’t fit the horizontal space, they are going to fall to the next line, as there’s no where else for them to go. Most people would indeed consider this to “responsive” — although I agree there could probably be nicer ways to handle it, but this is how tabs work in the theme, which are just an element of the included Bootstrap framework.

    http://getbootstrap.com/components/#nav-tabs

    However, the second major thing to keep in mind is that tabs are something it looks like you’ve highly customized, which starts to push what you’re asking outside of the scope of support I can offer you. They are pretty far from the default tabs of the theme, which you can see here:

    http://demoblvd.com/legacy/shortcodes/generator/tabs/

    With the way you’ve customized them, they take up a lot of horizontal space, with how many and how you’ve added the images. So the issue you’re describing wouldn’t be happening to most people at such a high viewport size, as they’d just be dealing with little blocks of text, not big image buttons.

    But it looks like you’ve already made styling customizations for smaller mobile view (i.e. you remove the fruit images on mobile). So just continue what you’ve been doing and add styling for a wider range of viewport sizes. For example, you could add percentages widths to the tab navigation items, and make the text smaller as the viewport gets smaller, etc. Or, if you have a developer that’s been doing these customizations for you, I’d suggest contacting them to continue where you’re wanting what they’ve done adjusted.

    #23128
    redswirl
    Participant

    Sorry if I was not clear! I need to get up to scratch with my terminology. I understand this is out of the scope of your support so I really appreciate the time you spent on it. I am going to try percentages and see where that gets me. Have a great day!

    #23138
    Jason Bobich
    Keymaster

    Maybe this will get you started:

    .nav-tabs > li {
      width: 14%;
    }
    .nav-tabs > li > a {
      background-size: 100% auto;
      max-width: 100%;
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.