How to Make Images Responsive on Mobile Devices

[gsot]

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!

Topic

[Jason Bobich]

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.

[gsot]

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/

[Jason Bobich]

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;
}

[gsot]

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.

[Jason Bobich]

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!

[gsot]

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

[Jason Bobich]

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>

[Author]

Replies