Using css to hide widget on website only

• 

  tylerbernhardt · Member · Oct 10, 2016 at 3:32 am

  • Copy link
  • Add topic to favorites

  i was wondering if i could hide a widget on my main website while keeping it visible on my mobile site.

  What i want is for my mobile site to have a footer with a transparent background of my social media icons. As of now, this widget is already made- i put it in my left footer section…although i can’t even see it on my site now. Again i only want this widget to show up on my mobile site NOT the main site.

  The blog I need help with is: (visible only to logged in users)

• 

  innisfreehomestead · Member · Oct 10, 2016 at 2:42 pm

  • Copy link

  Hello there,

  That’s definitely possible! However, I’m not seeing the icons in your footer at all? Would you mind making sure those are placed in? Once I see them I can give you a media query code that will hide them for desktop.

  Thanks,
  Sage

• 

  tylerbernhardt · Member · Oct 10, 2016 at 2:46 pm

  • Copy link

  Its a text widget w html code. Footer left.

• 

  tylerbernhardt · Member · Oct 10, 2016 at 2:51 pm

  • Copy link

  Ill move it to my sidebar. Then..
  1. Tell me how to hide it from only full main site.
  2. I already have codes in my css hiding the other widgets that show on my main site from the mobile site… How do i keep these the same while showing this new widget on mobile site?

• 

  innisfreehomestead · Member · Oct 10, 2016 at 3:19 pm

  • Copy link

  Hello!

  Thanks for placing it in the sidebar. This code should do the trick:

  #text-24 {
  	display: none;
  }
  
  @media screen and (max-width: 768px) {
  	#text-24 {
  		display: block !important;
  	}
  }

  It shouldn’t conflict with with any of the other CSS that changes the state of the other widgets.

  Let me know if that doesn’t work,
  Sage

• 

  tylerbernhardt · Member · Oct 10, 2016 at 3:24 pm

  • Copy link

  It appears the code did nothing for either site

• 

  innisfreehomestead · Member · Oct 10, 2016 at 3:27 pm

  • Copy link

  Hey there,

  I’m seeing the block hidden on the desktop but probably not showing on mobile as the main sidebar doesn’t show. Would you mind moving it to your footer area and letting me know if it works there?

  Thanks,
  Sage

• 

  tylerbernhardt · Member · Oct 10, 2016 at 3:46 pm

  • Copy link

  It was originally in footer area

• 

  tylerbernhardt · Member · Oct 10, 2016 at 5:22 pm

  • Copy link

  It’s weird cause my footer section doesn’t even show on the main site?

• 

  siobhyb · Member · Oct 10, 2016 at 5:44 pm

  • Copy link

  Hi Tyler,

  The following, in your custom CSS, is currently hiding all widgets on your mobile theme:

  .widget-area {
      display: none;
  }

  To display your widgets, firstly remove the above snippet.

  Next, you can hide the two widgets you don’t want to display on the mobile theme:

  #text-20, #text-23 {
      display: none;
  }

  The above will leave the widget that you do want to display (#text-24).

  Hope that helps!

• 

  tylerbernhardt · Member · Oct 10, 2016 at 5:56 pm

  • Copy link

  I attempted to do that and it looked like it erased all of them on the main site

• 

  siobhyb · Member · Oct 10, 2016 at 5:59 pm

  • Copy link

  Apologies for that, Tyler! Can you try the following instead?

  .widget-area #text-20, .widget-area #text-23 {
      display: none;
  }

• 

  tylerbernhardt · Member · Oct 10, 2016 at 5:59 pm

  • Copy link

  Ok so i moved around a few things and now the social media icons show on the mobile. Thing is…..

  I want text 24 only on mobile

  I want text 20 and 23 only on main site

• 

  tylerbernhardt · Member · Oct 10, 2016 at 6:09 pm

  • Copy link

  That worked! Now can o makw the background of text 24 transparent

• 

  tylerbernhardt · Member · Oct 10, 2016 at 6:41 pm

  • Copy link

  Also when i do the css to hide text 24 from main site it looks like it hid it from mobile site too… How can i fox this

• 

  siobhyb · Member · Oct 11, 2016 at 8:56 am

  • Copy link

  Hi Tyler,

  Try the following snippet to hide the widget on desktop but display it on mobile:

  #text-24 {
      display: none;
  }
  
  .widget-area #text-24 {
      display: block;
  }

• 

  tylerbernhardt · Member · Oct 11, 2016 at 1:02 pm

  • Copy link

  Great! Finally..

  1. How do i make tgw background of the text 24 transparent

  2. How do i make the text 24 closer to the body? Decrease padsing?

• 

  siobhyb · Member · Oct 11, 2016 at 5:28 pm

  • Copy link

  1. How do i make tgw background of the text 24 transparent

  You would apply the same rule as before – background: rgba(255,255,255,0.8); – to the .widget-area #text-24 selector. You’ll also need to set a background of none to the containing .widget-area:

  .widget-area {
    background: none;
  }
  
  .widget-area #text-24 {
      background: rgba(255,255,255,0.8);
  }

  2. How do i make the text 24 closer to the body? Decrease padsing?

  You could remove all padding between the widget and the body with the following:

  #secondary {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
  }
  
  #page {
      margin-bottom: 0;
  }

• 

  tylerbernhardt · Member · Oct 11, 2016 at 6:39 pm

  • Copy link

  That looks like is works but there is a line underneath the icons now- how do i get ride of that?

• 

  siobhyb · Member · Oct 12, 2016 at 9:07 am

  • Copy link

  Hi Tyler,

  There’s a box-shadow being added beneath the icons, which you can remove with the following:

  .widget-area {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
  }