Site logo not mobile friendly

• 

  scoobyhak · Member · Dec 8, 2017 at 10:20 am

  • Copy link
  • Add topic to favorites

  Hi guys,

  im currently rebranding a website: https://vemavm.com/test

  WordPress theme: xclean

  However, I have a huge problem. The logo is not mobile friendly.

  Can someone assist please?

  This is what I have as per logo via css:

  /*=======================================
  = Home Page Style =
  =======================================*/
  .home .wooproduct {
  margin-bottom: 0;
  }
  .header {
  height: 90px;
  transition: 0.3s linear !important;
  }
  .header .header-navigation .header-cart {
  right: 53px;
  }
  .header .site-logo img {
  width: 100px;
  margin-left: -30px;
  margin-top: 0;
  }
  .header.fixed-header {
  height: 70px;
  }
  .site-content {
  margin-top: 93px;
  }
  .navbar-toggle {
  top: -36px;
  }
  .header-search {
  top: 8px;
  }
  header .site-logo img {
  margin-left: 25px;
  }
  header .slideItWrapper {
  top: -32px;
  }
  header .navbar-toggle {
  left: -10px;
  }
  header .header-nav li .sub-menu li {
  padding: 10px 20px 12px 20px;
  }
  header .header-nav li .sub-menu li a:hover:before {
  margin-right: 10px;
  -webkit-transform: translateX(3px);
  -moz-transform: translateX(3px);
  -ms-transform: translateX(3px);
  transform: translateX(3px);
  }
  header .header-nav li .sub-menu li a:before {
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
  }
  header .header-search > img {
  position: relative;
  right: 0;
  top: -39px;
  padding: 7px 20px 20px 5px;
  }
  header .header-search.popup-woo > img {
  top: 30px;
  }
  header .search-inside form {
  width: 300px;
  padding: 25px 33px;
  }
  header .search-inside form input[type=”text”] {
  color: #fff;
  }
  header .search-inside form input[type=”submit”]:hover {
  opacity: 0.6;
  }
  .header-search .searchform input[type=”text”] {
  width: 195px !important;
  }
  .banner-section h4 {
  margin-bottom: 15px;
  }
  .banner-section.bordered h4 {
  padding-top: 35px;
  }
  .banner-section.bordered .banner-content {
  padding-bottom: 35px;
  }
  .banner-section.bordered .vertical-top h4 {
  padding-top: 10px;
  }
  .banner-section.bordered .vertical-top .banner-content {
  padding-bottom: 75px;
  }
  .banner-section.bordered .vertical-bottom h4 {
  padding-top: 75px;
  }
  .banner-section.bordered .vertical-bottom .banner-content {
  padding-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap .right,
  .wooslider .metaslider .caption-wrap .left {
  top: 15%;
  }
  .wooslider .metaslider .caption-wrap h5 {
  font-size: 14px;
  margin-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap h2 {
  font-size: 14px !important;
  line-height: 18px;
  margin-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap a {
  font-size: 14px;
  }
  .big-title h4 {
  font-size: 26px !important;

  and then further down:

  @media only screen and (min-width: 320px) and (max-width: 480px) {
  /*=======================================
  = Home Page Style =
  =======================================*/
  .home .wooproduct {
  margin-bottom: 0;
  }
  .header {
  height: 90px;
  transition: 0.3s linear !important;
  }
  .header .header-navigation .header-cart {
  right: 53px;
  }
  .header .site-logo img {
  width: 100px;
  margin-left: -30px;
  margin-top: 0;
  }
  .header.fixed-header {
  height: 70px;
  }
  .site-content {
  margin-top: 93px;
  }
  .navbar-toggle {
  top: -36px;
  }
  .header-search {
  top: 8px;
  }
  header .site-logo img {
  margin-left: 25px;
  }
  header .slideItWrapper {
  top: -32px;
  }
  header .navbar-toggle {
  left: -10px;
  }
  header .header-nav li .sub-menu li {
  padding: 10px 20px 12px 20px;
  }
  header .header-nav li .sub-menu li a:hover:before {
  margin-right: 10px;
  -webkit-transform: translateX(3px);
  -moz-transform: translateX(3px);
  -ms-transform: translateX(3px);
  transform: translateX(3px);
  }
  header .header-nav li .sub-menu li a:before {
  -webkit-transform: translateX(-10px);
  -moz-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
  }
  header .header-search > img {
  position: relative;
  right: 0;
  top: -39px;
  padding: 7px 20px 20px 5px;
  }
  header .header-search.popup-woo > img {
  top: 30px;
  }
  header .search-inside form {
  width: 300px;
  padding: 25px 33px;
  }
  header .search-inside form input[type=”text”] {
  color: #fff;
  }
  header .search-inside form input[type=”submit”]:hover {
  opacity: 0.6;
  }
  .header-search .searchform input[type=”text”] {
  width: 195px !important;
  }
  .banner-section h4 {
  margin-bottom: 15px;
  }
  .banner-section.bordered h4 {
  padding-top: 35px;
  }
  .banner-section.bordered .banner-content {
  padding-bottom: 35px;
  }
  .banner-section.bordered .vertical-top h4 {
  padding-top: 10px;
  }
  .banner-section.bordered .vertical-top .banner-content {
  padding-bottom: 75px;
  }
  .banner-section.bordered .vertical-bottom h4 {
  padding-top: 75px;
  }
  .banner-section.bordered .vertical-bottom .banner-content {
  padding-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap .right,
  .wooslider .metaslider .caption-wrap .left {
  top: 15%;
  }
  .wooslider .metaslider .caption-wrap h5 {
  font-size: 14px;
  margin-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap h2 {
  font-size: 14px !important;
  line-height: 18px;
  margin-bottom: 10px;
  }
  .wooslider .metaslider .caption-wrap a {
  font-size: 14px;
  }
  .big-title h4 {
  font-size: 26px !important;
  }

  Much appreciate it guys.

  Kenny

• 

  fstat · Staff · Dec 11, 2017 at 10:00 am

  • Copy link

  Hi there,

  vemavm.com/test is not hosted at WordPress.com.

  This support forum is for sites hosted at WordPress.com. Your question is about a self-hosted WordPress site and you’ll find help at the WordPress.org forums.

  If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.