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.

How to Make Images Responsive on Mobile Devices

  • Creator
    Topic
  • #22035
    gsot
    Participant

    The content on our site is working well, but any inserted images on interior pages are not. Do you have suggestions on how to make this mobile-friendly/responsive? See the header on this page (http://www.gsot.edu/espanol/) for an example of what is happening. Thanks!

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

    Hello,

    You’re using v1.0.1 of the theme, which is about 3 1/2 years old now. We’re now on v2.1.8, and all of these issues with responsive images have been resolved.

    http://themeblvd.com/changelog/?theme=swagger

    In updating, you’ll want to pay particular attention to the “2.0.0” entry in the above changelog, along with this article:

    http://support.themeblvd.com/updating-to-framework-v2-3/

    How to update:

    http://support.themeblvd.com/docs/theme-updates/#themeforest

    Note: You’ll need to use “Manual Update” method because your current theme was created before there was an in-dashboard update system.

    #22042
    gsot
    Participant

    We had tried updating a few times but had issues with the menu. We have that resolved now and are running the latest theme. The image responsiveness works! Thanks for the fix on that.

    Only thing I noticed on the theme update is that the text on the interior page headers has reverted back to gray instead of white. How can I update that so that words like accreditation on this page appear in white? http://www.gsot.edu/accreditation/

    #22047
    Jason Bobich
    Keymaster

    The text color you see there is correct. That area is supposed to be a light background color, but it looks like you’ve changed the background image of the theme that’s supposed to sit there to a solid blue image?

    How it should look: http://demoblvd.com/themes/swagger/sidebar-layouts/sidebar-right/

    Updating the theme in the future is going to much easier if you never make edits to the actual parent theme folder. Both changing the text color and the background of the featured area, should be done through CSS customizations, but never directly to theme files.

    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.

    .primary_light #featured {
      background: #003C64;
    }
    .primary_light #featured .featured-entry-title .entry-title {
      color: #ffffff;
    }
    #22049
    gsot
    Participant

    I understand that is the default look for the site. We were just trying to provide some customization to match up with the school colors, hence the change to blue. We did this in a child theme.

    #22050
    Jason Bobich
    Keymaster

    Sounds good. When I looked initially, it looked like the theme was calling the correct image, but when I pulled it up on your server, it was blue instead of the light color it was supposed to be. But looks like you’ve got correct now, so no worries!

    #22051
    gsot
    Participant

    Is there a trick to making the tables responsive like the images? See an example here:
    http://www.gsot.edu/ministry-concentrations/

    #22055
    Jason Bobich
    Keymaster

    The theme includes a frontend framework called Bootstrap that styles tables. You need to setup your table per their docs:

    http://getbootstrap.com/css/#tables

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>
Viewing 7 replies - 1 through 7 (of 7 total)

The forum ‘Swagger Responsive WordPress Theme’ is closed to new topics and replies.