moving a widget location

• 

  gotmaester · Member · Nov 29, 2017 at 9:40 pm

  • Copy link
  • Add topic to favorites

  I placed a google translate widget on page. I guess it is ok where it is. Not so happy with it being so white, so I thought maybe I could move it to the right on the white background, (e.g. upper right hand corner of the front page). Except I don’t think I am doing it right.

  This is my first wp theme which changes things with different screens, so things jump around. I would have to make it only show on desktop, perhaps, and not on mobile themes.

  Also I think the CSS below can be done better. Any ideas?

  #google_translate_widget-3 {
  position: absolute;
  margin: 0 700px;
  top: 20px;
  }

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

• 

  shubhamgmath · Member · Nov 30, 2017 at 1:22 pm

  • Copy link

  Hi

  For placing it to the upper right hand corner you can use the below code i edited from the css you have given

  aside#google_translate_widget-3 {
      position: absolute;
      margin: 0 1000px;
      top: 20px;
  }

• 

  gotmaester · Member · Nov 30, 2017 at 2:30 pm

  • Copy link

  thanks. However, that does not work. I need it to be responsive to changes in screen size.

• 

  shubhamgmath · Member · Nov 30, 2017 at 2:34 pm

  • Copy link

  That means you just need to show it in desktop not in mobile. I will look into it too

• 

  gotmaester · Member · Nov 30, 2017 at 2:54 pm

  • Copy link

  Shubhamgmath,

  I tweaked the code further. This seems to be working better at least for the desktop (and now even for tablet) screen sizes:

  aside#google_translate_widget-3 {
  float:right;
  margin-right:160px;
  clear:both;
  }

  So I think I just want to hide it for mobile.

• 

  gotmaester · Member · Nov 30, 2017 at 3:04 pm

  • Copy link

  oops, that was wrong, I meant

  aside#google_translate_widget-3 {
  position: absolute;
  right: -100px;
  top: 20px;
  }

• 

  gotmaester · Member · Nov 30, 2017 at 3:06 pm

  • Copy link

  And I think I figured out how to hide it on smaller screens. This seems to be working.

  @media screen and (max-width: 788px) {
  	aside#google_translate_widget-3 {
      display:none;
  }
  }

  How do things look on your end?

• 

  shubhamgmath · Member · Nov 30, 2017 at 3:11 pm

  • Copy link

  yes this will work, i also find out the same solution now only was just trying out once for confirmation

  cheers !!

• 

  gotmaester · Member · Nov 30, 2017 at 3:12 pm

  • Copy link

  Thanks for your help :)

• 

  shubhamgmath · Member · Nov 30, 2017 at 3:14 pm

  • Copy link

  Happy to help you in solving your issue :D

• 

  shubhamgmath · Member · Nov 30, 2017 at 3:16 pm

  • Copy link

  Happy to help you in solving your issue :D