Widget

I don’t want a widget to appear on mobile. Is it possible?

Thanks

Hi

You can use media queries and target the specific css classes for the widget you want to hide.

Ex:
@media (max-width: 768px){
.my-widget{
display: none;
}
}

To get the css classes you need to inspect the element with browser’s developer tool: http://screencast.com/t/qifR4EQfv

Thanks!

Thank you, I must write it like that? @media (max-width: 768px){ .td-pb-span4 wpb_column vc_column_container { display: none; } }

Hi

First the css you provided won’t work because the syntax is not correct, the correct code should be written like this, with . before every class:

@media (max-width: 768px){ .td-pb-span4 .wpb_column .vc_column_container { display: none; } }

Second, I don’t know what widget do you want to hide, so for example if you want to hide this widgetised sidebar: http://screencast.com/t/eXMQ079q the css will look like this:

@media (max-width: 767px){
.wpb_widgetised_column{
display: none;
}
}

I’ve targeted the element’s css class and applied a css property on it. Note that you may need a more specific target, depending by your widget position, like here for example: http://screencast.com/t/kWGoS3gdoVPW

@media (max-width: 767px){
.wpb_widgetised_column .td_block_social_counter{
display: none;
}
}

For more details about css coding you can check this link: http://www.w3schools.com/css/default.asp you will find very useful information there.

Hope this help.

Thanks!

Thank you, I still can’t do it. So here’s an image of my widget

Thank you again

Hi

Try this custom css in theme panel > custom css:

@media (max-width: 767px){
.wpb_widgetised_column{
display: none!important;
}
}

Thanks!

Hi,

Thank you so much, it works! I got one more question:

My Mailchimp form won’t appear on mobile, do you know why?
Here’s the code.

Thanks.

<<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-081711.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
h1{ position:center;}
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }

</style>
<div id=”mc_embed_signup”>
<form action=”//healthills.us11.list-manage.com/subscribe/post?u=ce8bee94e661810bed5419e47&id=81426b9ae7″ method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>
<h1>SING UP FOR HEALTHILLS’S NEWSLETTER</h1>
<div class=”mc-field-group”>
<label for=”mce-EMAIL”>Email Address </label>
<input type=”email” value placeholder=”Email” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
<div class=”mc-field-group”>
<label for=”mce-FNAME”>First Name </label>
<input type=”text” value placeholder=”First Name” name=”FNAME” class=”required” id=”mce-FNAME”>
</div>
<div id=”mce-responses” class=”clear”>
<div class=”response” id=”mce-error-response” style=”display:none”></div>
<div class=”response” id=”mce-success-response” style=”display:none”></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;”><input type=”text” name=”b_ce8bee94e661810bed5419e47_81426b9ae7″ tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</div>
</form>
</div>
<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>
>

The problem happens when I put the code: @media (max-width: 767px){
.wpb_widgetised_column{
display: none!important;
}
}

Hi, here’s the test page

Thank you!

Hi

Replace the previous css with this one: http://screencast.com/t/yRJ13muA

@media (max-width: 767px){
.td-pb-span4 .wpb_widgetised_column{
display: none!important;
}
}

Let me know how it goes.
Thanks!

it Works Perfectly!
thanks