How do I change the theme mobile style?

Hi,
Some clients have pointed me out that the theme is kinda slim for their Smartphones, this because of the background and theme layout, also the side widget bar make the site to long when seen from a smartphone.
So I would like to know if there is a way to make the theme lose its background when used from a smartphone, and also if I can lose the side and some bottom widget bars form the smarphone view of my site. This would improve so much the experience of my visitors.

Thanks in advance


Best regards

 

Hello,

Could you please provide us some edited screenshot indicating the widget/section you want to hide in the smartphone ?
In case you are unable to create a screenshot, you can follow the link http://www.screenpresso.com/ which will help you to create screenshot easily.

Also, provide us URL of your website.


Thanks,
Praveen

 

Hi, thanks for the response, i add 2 screen shots of the areas i`d like to change, were the green square is the widget i`d like to remove fromo the smartphone view and the red circle the background consuming space.
And as you ask i leave here the link to my site: http://www.tengohambre.biz/

Best Regards

 

Hello,

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: 767px){
body {
  background: none !important;
}
.footer_widget.first {
  display: none !important;
}
.footer .footer_widget.second {
  display: none !important;
}
.sidebar img:first-child {
  display: none !important;
}
ul.wpbdp-listings-widget-list {
  display:  !important;
}
}

Hope it will resolve your issue


Thanks,
Praveen

 

Hi again, thanks for the help and the response, i solve some problems.
The code worked whit the footers except the fourth, also i would like to take out the side bar not just the footers from the smartphone view.
Also when I use the code for background it just disappeared, i wanted that the white middle part expands to cover it or at least to expand a bit, so it doesn’t look all stretched

This were the results.
the fist image shows that the backgound just disapeared and the white main part didn`t expand
and the second is the side bar widget that i would like to take down.

Best regards

 

Hello,

Along with the earlier provided code, try this code:-

Code:

@media only screen and (max-width: 767px){
.sidebar {
  display: none !important;
}
}
 
@media only screen and (max-width: 480px){
.body_wrapper {
  width: 375px;
}
}
@media only screen and (max-width: 767px) and (min-width: 480px){
.body_wrapper {
  width: 520px;
}
}

Thanks,
Praveen

 

it worked perfectly

thanks a lot