Text will not wrap on mobile

• 

  docsdigitalconsulting · Member · Apr 25, 2020 at 7:57 am

  • Copy link
  • Add topic to favorites

  I am using the Karuna Theme and I added a second line in the title however on mobile the text is running off the screen without breaking.

  I am also having issues with the layout turning into a jumble on landscape mode on all devices.

  Image on my Galaxy Note 10+ in portrait mode is here.

  Image of my Note 10+ in Landscape mode is here.

  Here is the code that I have so far:

  @media screen and (max-width:799px) {
  .site-title:after {
  	content: ' "A IF YOU WANT SAFE CLEAN disinfecting and sanitation today, call S&S we are just a spray away" ';
  	white-space: pre;
  	font-size: 16px !important;
  	word-wrap: normal;
  	}
  }
  

• 

  32lamar · Member · Apr 25, 2020 at 10:07 am

  • Copy link

  Hi,

  could you post the site please so I can look it up online?

  Normally css for media screens look like:
  
  @media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2) {
  content: ‘ “A IF YOU WANT SAFE CLEAN disinfecting and sanitation today,
  call S&S we are just a spray away” ‘;
  white-space: pre;
  font-size: 16px !important;
  word-wrap: normal;
  }

  You can also try to set the max-width to em to stay flexible.