Mobile Website Problem

Hello all,

I would kindly ask you for your support with mobile version of my website www.chocolabea.com. I have a problem that a menu on my iphone for example is placed in the middle of the page and on ipad as it supposed to be (left or right corner) and the second problem that I am having is that when I click on my menu button, the buttons appear in black colour; can that be changed?

Thank you in advance and kind regards,

Flowy

Hello there,

Thank you for asking.

In order to achieve that objective, could you please try to add the following CSS codes through the Simple Custom CSS plugin?

> I have a problem that a menu on my iphone for example is placed in the middle of the page and on ipad as it supposed to be (left or right corner)

@media only screen and (max-width: 767px){
  
  .header-wrap .container{
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .header-wrap .col-xs-12{
    width: 50%;
  }
  
  .header-wrap .col-md-4.col-sm-8.col-xs-12{
    text-align: left;
  }
  
  .btn-menu{
    margin-top: 0;
    margin-right: 15px;
    float: right;
  }
  
  #mainnav-mobi{
    top: 28px;
    right: 15px;
  }
  
}

> … when I click on my menu button, the buttons appear in black colour; can that be changed?

#mainnav-mobi ul li{
  border-top: 1px solid #DE8787; 
  background: #DE8787;
}

Please adjust the color code to meet your need.

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

Warmest regards,
Kharis

Hello Kharis,

thank you very much for your prompt reply and solution suggestion, I really appreciate it.
I have tried to insert the codes that you have suggested and it helped, thank you!
I have now no problem with the setting on my iphone for example, but the black background still appears on the top when i open it on my ipad. Is there some missing setting that needs to be done additionally?

Beside that I would also like to ask you if you have any information about subscription and contact form widget that I am using on the website from Jetpack; can size of fields be adjusted? They appear a little big.

Thank you in advance and kind regards,

Flowy

Dear Flowy,

You’re welcome.

> … but the black background still appears on the top when i open it on my ipad.

Could you please try to add the following CSS code?

@media only screen and (max-width: 1024px){
  .site-header {
    background-color: transparent;
  }
}

> … can size of fields be adjusted? They appear a little big.

Could you please try to add the following CSS code?

input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
  height: 40px;  
}  

button, input[type="button"], input[type="reset"], input[type="submit"] {
  padding: 8px 34px;
}  

You might need to make adjustment to meet your need.

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

Warmest regards,
Kharis

Hello Kharis,

thank you very much once again for your top support, I really appreciate it!
Your suggestions worked for me, the only minor adjustment that I still try to achive is that the first slider photo is not cut when viewed on ipdad, all the rest seems to be fine now.

If you have any further idea on how to solve this minor issue, I would really appreciate your advice.

Have a nice day ahead and kind regards,

Adriana