Menu text overlapping for mobite site

• 

  helenalapworth · Member · Mar 11, 2018 at 6:20 pm

  • Copy link
  • Add topic to favorites

  Hi, for the Theme RetroTale, the menu text on the mobile version of the website is overlapping each other, currently stylesheet code I have found is:

  @media screen and (max-width: 1170px) {
  body #container,
  body #container-title,
  body .top-navigation {
  max-width: 1012px;
  }
  html #wrapper #main-content,
  body .menu-box,
  body #footer {
  width: 956px;
  }
  html #wrapper .sticky-nav {
  max-width: 1012px;
  }
  body #content {
  width: 628px;
  }
  body #sidebar {
  width: 300px;
  }
  body .footer-widget-area {
  width: 300px;
  }
  }

  @media screen and (max-width: 1012px) {
  #wrapper #container,
  #wrapper #container-title,
  #wrapper .top-navigation {
  max-width: 90%;
  width: 90%;
  }
  #wrapper #container #main-content {
  padding: 28px 5% 10px;
  width: 90%;
  }
  #wrapper #content,
  #wrapper .top-navigation ul {
  max-width: 100%;
  width: 100% !important;
  }
  #wrapper #sidebar {
  float: left;
  margin: 15px 0 0;
  width: 100%;
  }
  #wrapper .header-contact {
  text-align: center;
  width: 100%;
  }
  #wrapper .menu-box {
  padding: 0;
  width: 100%;
  }
  #wrapper #header .sticky-nav {
  max-width: 90%;
  }
  #wrapper .top-navigation {
  padding: 0 5%;
  }
  .js #nav {
  display: none;
  }
  .js .selectnav {
  background: #fffdee;
  border: 1px dashed #cccccc;
  color: black;
  display: block;
  float: left;
  height: 30px;
  margin: 7px 0 0 5%;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  width: 90%;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  }
  #wrapper .grid-entry,
  #wrapper #main-content .js-masonry .sticky {
  width: 50%;
  }
  #wrapper #container #footer {
  background-image: none;
  padding: 35px 5% 10px;
  width: 90%;
  }
  #footer .footer-widget-area {
  margin: 0;
  padding: 0;
  width: 100%;
  }
  #wrapper .footer-signature,
  #wrapper .menu-box {
  background-image: none;
  }
  }

  @media screen and (max-width: 782px) {
  .admin-bar #header .sticky-nav {
  top: 46px !important;
  }
  }

  @media screen and (max-width: 600px) {
  .admin-bar #header .sticky-nav {
  top: 0 !important;
  }
  #wrapper #container .grid-entry,
  #wrapper #container #main-content .js-masonry .sticky {
  width: 100%;
  }
  #wrapper .grid-entry .grid-entry-inner,
  #wrapper #container #main-content .js-masonry {
  margin: 0 !important;
  }
  }

  What can I do to avoid text overlap? Do I need to increase the margins? If so, by how much and where?
  Many thanks

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

• 

  helenalapworth · Member · Mar 11, 2018 at 6:21 pm

  • Copy link

  The blog is http://www.cheztitine-salon.com/

• 

  timethief · Member · Mar 11, 2018 at 8:56 pm

  • Copy link

  I’m sorry but that site is not on WordPress.COM servers.

  cheztitine-salon.com a wordpress.ORG software install on paid hosting, is hosted by GoDaddy.com
  Name Servers:
  ns56.domaincontrol.com
  ns55.domaincontrol.com

  To get hosting support contact your web host and to get software support post to wordpress.ORG support.

  WordPress.COM and WordPress.ORG are completely separate and have different username accounts, logins, features, run different versions of some themes with the same names, and have separate support documentation and separate support forums. Read the differences here http://en.support.wordpress.com/com-vs-org/

  The wordpress.ORG support forum is at http://wordpress.org/support. The wordpress.ORG login link is here https://login.wordpress.org/ If you do not have an account yet then click Create an account https://login.wordpress.org/register/ and if you have lost an account password click Lost password? https://login.wordpress.org/lostpassword/
  WordPress.org support docs are at https://codex.wordpress.org/Main_Page
  See also https://apps.wordpress.org/support/ for app support.