My mobile version is distorted

• 

  wordpower3000 · Member · Oct 3, 2016 at 7:36 pm

  • Copy link
  • Add topic to favorites

  https://wordpower3000.com/2016/08/09/level-k-3-vocabulary-words/

  The mobile version is not good. the text comes under the audio control. please help

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

• 

  thesacredpath · Member · Oct 4, 2016 at 1:22 am

  • Copy link

  Hi there, this is one of the issues you can run into using tables on responsive designed themes.

  About all I have to offer toward a solution would be to put the name and the audio control button in the same table cell so that when the space gets too narrow the audio control can move below the name. This will be a bit clunky since you have some short words (Calf) and some longer ones (Aquarium), which means they will not all move below at the same time. You could add them both to the same cell (td) and then put a line break between the name and control code which would force them below the name on all screens/window widths.

• 

  wordpower3000 · Member · Oct 4, 2016 at 2:01 pm

  • Copy link

  I will be adding many many rows. if the audio is below the word, then the page is going to get very long. That will make even the computer experience unpleasant.

• 

  thesacredpath · Member · Oct 4, 2016 at 7:43 pm

  • Copy link

  You know, there is only so much we can do. As my uncle would say, we are trying to put 10 pounds in a 5 pound bag. In the following, I’ve taken out and adjusted as much padding and such as I can and not make things unreadable. I’ve done all this using a series of Media Queries to adjust spacing, alignment and font size at select breakpoints. Add the following at the very bottom of your custom CSS and see what you think. Make sure and view this in phone and tablet. I don’t seen anything going awry in my testing, but you should verify that.

  @media screen and (max-width: 700px) {
  	.single.postid-35 .site-content {
  		padding-left: 0.5em;
  		padding-right: 0.5em;
  	}
  	.single.postid-35 td {
  		padding-left: 5px;
  		padding-right: 5px;
  	}
  	.single.postid-35 #page {
  		padding-left: 0;
  		padding-right: 0;
  	}
  }
  @media screen and (max-width: 575px) {
  	.single.postid-35 td {
  		font-size: 85%;
  	}
  	.single.postid-35 .audio-player {
  		float: right;
  	}
  }
  @media screen and (max-width: 450px) {
  	.single.postid-35 td {
  		padding-left: 3px;
  		padding-right: 3px;
  		font-size: 80%
  	}
  }