header image: overlapping

• 

  dohatimesliving001 · Member · Mar 25, 2017 at 1:05 am

  • Copy link
  • Add topic to favorites

  Hi!

  Support is already helped me to add image to my header banner beside my logo. however could you help me to fix it for MOBILE view? i think its obstruct my view view.

  https://evolvewellnessorg.wordpress.com/ LINK for my site.

  Thanks!
  niel

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

• 

  otpidusprime · Member · Mar 25, 2017 at 7:49 am

  • Copy link

  Hi there,
  I checked out your code and found that there are some semantic errors on it, which may cause visual issues in the future.

  The placement of code of the LET’S KICK CAMP banner image is wrong. Its inside the body wrapper currently:
  Like this

  <aside class="sidebar sb-right">
  
  <div id="text-1" class="sb-widget widget_text">
  <h4 class="widget-title">What’s New</h4>
  <div class="textwidget">
  <a href="https://evolvewellnessorg.wordpress.com/"><img src="https://evolvewellnessorg.files.wordpress.com/2017/03/ad1.png"></a>
  <br><br>
  <a href="https://evolvewellnessorg.wordpress.com/">
  <img src="https://evolvewellnessorg.files.wordpress.com/2017/03/29_m_wip02.gif"></a>
  </div>
  </div>
  
  <!--THIS IS YOUR LET'S KICK CAMP BANNER INSIDE THE BODY WRAPPER-->
  <div id="image-3" class="sb-widget widget_image">
  <div style="overflow:hidden;">
  <a href="https://evolvewellnessorg.wordpress.com/">
  <img src="https://evolvewellnessorg.files.wordpress.com/2017/03/lkibanner_ad.png?w=500&h=83" class="alignnone" width="500" height="83"></a>
  </div>
  </div>
  </aside>

  But it should be inside the header along with the code of the logo:
  Like this

  <header class="header-wrap">
  <a href="https://evolvewellnessorg.wordpress.com/" title="Qatar Wellness.com" rel="home">
  <div class="logo-wrap" role="banner">
  <img src="https://evolvewellnessorg.files.wordpress.com/2017/03/cropped-blog_logo.png" height="140" width="340" alt="Qatar Wellness.com">
  </div>
  </a>
  
  <!--THIS IS YOUR LET'S KICK CAMP BANNER INSIDE THE HEADER JUST BESIDE THE LOGO-->
  <div id="image-3" class="sb-widget widget_image">
  <div style="overflow:hidden;">
  <a href="https://evolvewellnessorg.wordpress.com/">
  <img src="https://evolvewellnessorg.files.wordpress.com/2017/03/lkibanner_ad.png?w=500&h=83" class="alignnone" width="500" height="83"></a>
  </div>
  
  </div>
  
  .....<!--other header codes-->
  
  </header>

  To solve the overlapping issue:
  Make the corrections mentioned above and make the following changes to the CSS code of the LET’S KICK CAMP banner image and also the CSS code of the logo.
  New CSS for the logo

  .logo-wrap {
      position: relative;
      overflow: hidden;
      display: inline-block;
  }

  New CSS for the LET’S KICK CAMP banner image

  .widget_image {
      position: relative !important;
      float: right;
      margin-right: 50px;
      margin-top: 30px;
      z-index: 2;
  }

  Now add the following CSS code(at the end of the CSS file) for the mobile view(below 1000px) to solve the overlapping issue:

  @media only screen and (max-width: 1000px) {
    .logo-wrap {
        display: block;
    }
  
    .widget_image {
        float: none;
        margin-right: 0px;
        margin-top: 0px;
    }
  }

  This will bring down the banner image below the logo on mobile, so they do not overlap.

  Let me know you need help with something more… :)

• 

  dohatimesliving001 · Member · Mar 25, 2017 at 12:31 pm

  • Copy link

  Hi!

  I did not do the codes, i just asked help and PM’ed the support, we have our chat communication. Is it possible for you to apply this codes?

  Thanks!
  niel

• 

  dohatimesliving001 · Member · Mar 25, 2017 at 12:31 pm

  • Copy link

  Hi!

  I did not do the codes, i just asked help and PM’ed the support, we have our chat communication. Is it possible for you to apply this codes?

  Thanks!
  niel

• 

  dohatimesliving001 · Member · Mar 25, 2017 at 12:32 pm

  • Copy link

  By the way i don’t have Editor setting or code editor in my wordpress account and i can’t execute your suggested codes to include.

• 

  otpidusprime · Member · Mar 26, 2017 at 10:11 am

  • Copy link

  Hi again,
  No i cannot add the codes into your site because i am not on the WordPress Staff and hence i do not have the access to your blog data.

  But a WordPress staff/engineer can do this i suppose, you can wait for them to respond to your query and see if they can do it on your behalf.

  You can do it yourself tho, by editing the CSS(if you have a WordPress.com Premium and WordPress.com Business plan):

  Check out more info on customizing CSS here: https://en.support.wordpress.com/custom-css/