Images in table not reformatting to fit on mobile site.

• 

  mmbluewigwam · Member · Dec 12, 2016 at 6:10 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I am trying to create a page that has images linking to categories. In order to get the images to stay in a regular pattern, I have put them into a table. The only problem is when I visit the page on my mobile, the images stay in the table instead of moving down the page to fit.

  https://bluewigwam.com/services?iframe=true&theme_preview=true

  https://wordpress.com/page/bluewigwam.com/636

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

• 

  thesacredpath · Member · Dec 13, 2016 at 3:19 am

  • Copy link

  Hi there, tables do not play well with responsive designed themes, such as Gather. The table will always stay 3 columns. We can get things to adjust, but the images would be very tiny on a smaller phone in portrait orientation and virtually impossible to tap on.

  What I would suggest is that you edit that page, remove the table and reinsert your images singly and switch to the Text tab and add a CSS class to each of the image HTML tags, similar to this:
  <img class="my-svc alignnone wp-image-..."
  What I added was the my-svc class.

  Also, surround all the content within a div with a CSS class like this.

  <div class="my-container">
  All your image code here
  </div>

  Let me know when you have that done and I can work on getting things into columns and include the Media Queries necessary to get it to work on all size screens. What I will do is display 3 columns on wider screens, then drop to 2 when it looks like things are getting crowded, and then finally to 1 column on smaller screens (phones and small tablets).

• 

  mmbluewigwam · Member · Dec 13, 2016 at 9:21 am

  • Copy link

  Thank you so much for your help. I will try the above and get back to you.

• 

  thesacredpath · Member · Dec 13, 2016 at 6:49 pm

  • Copy link

  You are welcome.