mobile view top portion looking distorted

The site mobile view is distorted as the slider image appears on top and
- logo is not centered
- tap to call is not centered
- a black shadow effect appears overlapping both logo and tap to call
- page navigation is not centered

I'd like to make the logo, tap to call and navigation centred and hide the black shadow on mobile view

 

Helo Devesh !

Please use this code in Custom CSS box.

Code:

@media only screen and (max-width: 480px){
.header {
  top: 332px;
  width: 290px;
  margin: 0 auto;
}
}

Thanks & Regards
Pramod Patel

 

this code only moved the logo and tap to call a few pixels down, the centre alignment issue and the black shadow effect issue is still not fixed. Please see the screenshot after this code below:

 

Hi deveshd!

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 480px){
.slider-wrapper {
background: none !important;
}
header.header.home {
margin-top: -110px !important;
margin-left: 55px !important;
}
.slider-wrapper {
margin-bottom: 170px !important;
}
}

Thanks,
Praveen

 

works thanks!

Question: I updated margin-left: 55px !important;

to 30px and it looks good on my iphone6+ do I have to worry about each device or entering on one view take care of others?

 

Hi deveshd!

You need not to worry, it will look fine for all other devices.

Thanks,
Praveen