label off photo link in mobile platform

• 

  bluelinebreakroom · Member · May 30, 2017 at 10:48 pm

  • Copy link
  • Add topic to favorites

  Your staff recently guided me on fixing mobile platform issues I was having with photo links and it solved 98% of the issues. I have two pages that are not cooperating.

  1st- https://bluelinebreakroom.com/coffee-service/products/gourmet-coffee-products/california-tea-house/

  At the bottom of this page, there is a photo link with a “Contact us Now” Label.

  When you view the same page on a mobile device, the “Contact us Now” label is off the photo link and behind the social media links. I can not figure out where the problem is.

  This page is set up the same way but works great. https://bluelinebreakroom.com/coffee-service/products/gourmet-coffee-products/blind-dog-coffee-roasters/

  2 – On one of my blog articles, https://bluelinebreakroom.com/2017/05/12/health-benefits-of-coffee/

  I have six photo links at the bottom of the page with white labels over them. They appear normal on a desktop. When viewing them on a mobile device, the labels are off the photos.

  this is particularly strange because, on my other pages with these same photo links, the photos appear verticle with labels when viewed on a mobile platform

  Any help is appreciated.

  Chris Murphy

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

• 

  thesacredpath · Member · May 31, 2017 at 5:28 am

  • Copy link

  Chris, for the coffee roasters page, add the following to the bottom of your custom CSS. It’s not perfect, but given how all this had to be done, it’s about the best I think we can expect unless we create a huge number of Media Queries.

  @media screen and (max-width: 959px) {
  	.page-id-1124 .grid-link-wrapper:nth-of-type(1) a::after {
  		bottom: 250px;
  		left: 35%;
  	}
  }
  @media screen and (max-width: 600px) {
  	.page-id-1124 .grid-link-wrapper:nth-of-type(1) a::after {
  		left: 30%;
  	}
  }
  @media screen and (max-width: 400px) {
  	.page-id-1124 .grid-link-wrapper:nth-of-type(1) a::after {
  		left: 20%;
  	}
  }

  On that blog post, this is very difficult to do. Again, without creating a whole bunch of Media Queries, I think this is about the best we can do. Add this below the other CSS I have above at the bottom of your custom CSS.

  @media screen and (max-width: 600px) {
  	.postid-1606 .grid-link-wrapper:nth-of-type(2) a::after {
  		left: 25%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(3) a::after {
  		left: 20%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(4) a::after {
  		left: 10%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(5) a::after {
  		left: 0;
  		bottom: 25%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(6) a::after {
  		left: 10%;
  		bottom: 35%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(7) a::after {
  		left: 5%;
  		bottom: 25%;
  	}
  }
  @media screen and (max-width: 480px) {
  	.postid-1606 .grid-link-wrapper {
  		width: 48%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(2) a::after {
  		left: 20%;
  		bottom: 30%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(3) a::after {
  		left: 15%;
  		bottom: 30%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(4) a::after {
  		left: 5%;
  		bottom: 25%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(6) a::after {
  		left: 10%;
  		bottom: 20%;
  	}
  	.postid-1606 .grid-link-wrapper:nth-of-type(7) a::after {
  		left: 5%;
  		bottom: 20%;
  	}
  }

• 

  bluelinebreakroom · Member · May 31, 2017 at 11:35 pm

  • Copy link

  Man, you guys are amazing. You are appreciated!

• 

  thesacredpath · Member · Jun 1, 2017 at 3:52 am

  • Copy link

  You are welcome, and thanks.