Mobile version

Hi guys,

My mobile version is not working as it should be. The slider + menu stays in normale size if you visit on mobile or tablet. So the modules down the slider of the home page are good, only the slider doenst go mobile. How can i fix this?

wptijdelijk.hynn-group.com

Hello there,

Thank you for reporting.

Could you please try to add the following CSS code thorugh the Simple Custom CSS plugin?

@media only screen and (max-width:960px){

  .header-info {
      top: -webkit-calc(50% - 60px);
      top: -moz-calc(50% - 60px);
      top: calc(50% - 60px);
  }
  
  .container{
    width: auto;
  }
  
}

@media only screen and (max-width:600px){

  .header-info {
    top: -webkit-calc(50% - 30px);
    top: -moz-calc(50% - 30px);
    top: calc(50% - 30px);
  }

}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,

Thanks for your response. It works, BUT now it’s eating a little bit from the slider and CTA buttons. How can change the marge within the menu on mobile and keep space between the slider text?

Hello there,

Could you please try to add the following CSS code?

@media only screen and (max-width: 600px){

  .site-branding.col-md-4.col-sm-6.col-xs-12{
    float: left;
    width: auto;
  }
  .mobile-nav{
    width: 40px;
    float: right;   
  }
  .site-logo {
    max-height: 40px;
  }
  .site-header.has-header{
    padding-bottom: 0;
  }
  .slicknav_btn{
    margin: 0;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis,

That didnt work. You can check by yourself @ your phone.

Hi Kharis,

If you look the CTA buttons are to close to the second. There must be some space.

Hello there,

Could you please try to add the following CSS code?

@media only screen and (max-width:445px){
  .header-button.right-button{
    margin-left: 0;
    margin-top: 3px;
  }
}

In the smaller screen, the second button might not be fully visible. It happens because the image height is a bit narrower vertically. Try to increase its height.

I hope it helps.

Regards,
Kharis

Hi Kharis,

Thanks again, but still nothing see image link.

http://nl.tinypic.com/r/2u5ay4j/9

You see that the second CTA button is not fully visible.

Hello there,

Could you please try to add the following CSS code?

@media only screen and (max-width:445px){

  .header-info{
    top: 11%;
  }

  .header-info .header-text{
    padding: 0;
  }

  .header-buttons{
    margin-top: 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .header-buttons a{
    font-weight: normal;
    padding: 2px 7px;
  }

}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hi Kharis,

Your great! That worked out. Just one single question regarding this matter, is it possible to make the slider vertical a little bit longer?

Thanks again for your quick support.

Hello there,

Glad to hear that!

is it possible to make the slider vertical a little bit longer?

The image height is down-sized proportionally. Try to use a new longer image.

Warmest regards,
Kharis

Great, thank you Kharis!

Hello there,

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis