auto size when on mobile. Recommendations and

• 

  irlonestar · Member · Nov 18, 2014 at 4:51 pm

  • Copy link
  • Add topic to favorites

  Hello! I have a wesbite that features several different “podcasts” that each have their own social media. I am trying to figure out the most efficient way to display their OWN social media on each of the pages. In the past, I have used my own logos and just used a <table> code to host the images that link to each social media. You can see my example here: http://irlonestar.com/mac/

  The problem I am running into is when users visit from a mobile device. I have tried different methods (auto sizing, 100%, the table and image etc…) but I can’t get the table to re-size to the different resolution on the users device. So the table ends up bleeding over.

  Do you guys have any suggestions on how I should go about displaying their social media links?

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

• 

  designsimply · Member · Nov 18, 2014 at 7:35 pm

  • Copy link

  I would recommend adding the icons in a “div” tag with a custom class name and then styling the div if needed. To do it, there are two parts. You would need to update the HTML for the icons using a custom class name and then add CSS to style them in the Appearance > Customize > CSS editor.

  Here is an example I came up with to illustrate that you can try out on your blog:

  <div class="my-social-links">
  <a href="http://wordpress.com"><img src="http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png" /></a> <a href="http://wordpress.com"><img src="http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png" /></a> <a href="http://wordpress.com"><img src="http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png" /></a>
  </div>

  .my-social-links {
  	text-align: center;
  }

• 

  irlonestar · Member · Nov 18, 2014 at 9:17 pm

  • Copy link

  Thank you designsimply. It did align them in the center, but not from left to right. http://irlonestar.com/mac/

• 

  designsimply · Member · Nov 18, 2014 at 11:29 pm

  • Copy link

  Looks like you somehow added extra paragraph tags into your HTML or you put things on multiple lines when they should be in one line. Can you make sure all the “a” tags are on one line in the HTML?

• 

  irlonestar · Member · Nov 18, 2014 at 11:42 pm

  • Copy link

  So finicky! Thanks again Designsimply.

• 

  designsimply · Member · Nov 19, 2014 at 5:38 pm

  • Copy link

  Ha, it is finicky isn’t it! :) You’re welcome.