AnsweredAssumed Answered

Change Label Size in Splash Screen to fit Mobile Device

Question asked by jpilbeam on Oct 24, 2018
Latest reply on Oct 25, 2018 by rscheitlin

As part of a splash screen I want to shrink the size of the "Explore Map" label in the mobile device screen. It's actually a close button that hides the overlay/splash screen. 

 

It has to be readable on all sorts of devices as this app is meant for the general public. I only want to make it smaller on the mobile device. I was looking for a way to change it in the CSS. 

 

Here's the view on an i-phone 4, the smallest screen I could find:

 

PC:

 

CSS. Right now the font-size for the label is at 300%. 

.overlay-wrap .hide {
  position: absolute;
  top: -999em;
  right: 10px;
  opacity: 0;
  color: rgb(141, 1, 1);
  border: none;
  padding: 10px;
  font-size: 300%;
  text-shadow: 2px 2px 5px gray;
  z-index: 2;
  cursor: pointer;
  -webkit-animation: 0s fadein 2s forwards;
  -moz-animation: 0s fadein 2s forwards;
  -ms-animation: 0s fadein 2s forwards;
  animation: 0s fadein 2s forwards;
  font-family: 'Open Sans', Georgia, serif;
}

Outcomes