Corrupt Theme (Overlapping of texts)

• 

  kaifahsan · Member · Jan 23, 2017 at 11:59 am

  • Copy link
  • Add topic to favorites

  I have recently switched to the Timepiece theme. It works fine on Desktop version. But for the mobile version the texts in the home page. Here is a link to a screenshot to clear my point :
  https://ktechweb.wordpress.com/wp-admin/upload.php?item=5898

  The overlapping of the texts really make the site very unattractive. I’ve already talked with happiness engineers and they referred here. So, it’ll be a lot of help if the problem is solved as soon as possible. :)
  Thanks

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

• 

  greenlotusavenue · Member · Jan 23, 2017 at 12:13 pm

  • Copy link

  Try changing the theme and re applying the theme.

• 

  kaifahsan · Member · Jan 23, 2017 at 12:27 pm

  • Copy link

  Tried it several times after you’ve mentioned @zirkapurproperty. But the problem stays the same. :(

• 

  staff-loquaciousloon · Staff · Jan 24, 2017 at 9:15 pm

  • Copy link

  Hi @kaifahsan!

  I’ve just taken a look and made sure this has been reported to the theme design team to take a look at :)

  It may require a bit of adjustment in the theme styles, but we’ll be sure to post an update here when we know more!

• 

  laurelfulford · Staff · Jan 26, 2017 at 9:56 pm

  • Copy link

  Hi @kaifahsan!

  staff-loquaciousloon also noticed that a similar issue was happening on tablet-sized screens (when the images and text sits side by side). I’ve included some CSS below that should fix both issues:

  1. On mobile, it makes sure the content isn’t overlapping as it does in your screenshot.

  2. The mobile layout – when the images and text is stacked – will be used on slightly larger screens than it is now as well. This will only affect devices like smaller tablets.

  Please give this a try and let us know if you run into any issues!

  @media screen and (max-width: 850px) {
  	h1.entry-title {
      	font-size: 26px;
  	}
  }
  @media screen and (max-width: 620px) {
  	article.post {
  		display: block;
  	}
  	.article-liner, .entry-content {
  		width: 100%;
  		display: block;
  	}
  	article.format-image .article-liner,
  	article.format-gallery .article-liner {
  		margin-top: 200px;
  	}
  	article.format-image .entry-content>a {
  		display: block;
  		position: absolute;
  		top: 50%;
  		margin-top: -100px;
  	}
  	.article-liner h1.entry-title {
  		padding-top: 60px;
  	}
  	.article-liner,
    	.entry-content {
  		height: auto;
  	}
  	.entry-content p {
  		padding: 20px 20px 40px 20px;
  	}
  	body.archive .entry-title,
  	body.blog .entry-title {
  		padding-bottom: 20px;
  	}
  	body.archive footer.entry-meta,
  	body.blog footer.entry-meta {
  		position: relative;
  		top: auto;
  		bottom: auto;
  		padding-bottom: 20px;
  	}
  	article.format-image .entry-content,
  	article.format-gallery .entry-content {
  		position: absolute;
  		top: 0;
  		overflow: hidden;
  		height: 200px;
  	}
  	article.format-video .entry-content p {
  		padding: 0;
  	}
  	#masthead hgroup {
  		float: none;
  		width: 100%;
  	}
  	.main-navigation {
  		clear: both;
  		float: none;
  		width: 100%;
  	}
  	.site-title {
  		font-size: 24px;
  		font-size: 2.4rem;
  	}
  	#masthead {
  		padding: 5px 0;
  	}
  	article.format-aside .article-liner,
  	article.format-status .article-liner,
  	article.format-quote .article-liner {
  		height: 100px;
  	}
  }