About The Authors Text Widget Centered on Mobile

• 

  lifeismeantforexploring · Member · Mar 25, 2017 at 7:16 pm

  • Copy link
  • Add topic to favorites

  Hey there,

  I was playing around with putting a box around the sidebar text widget on our site. I was able to do so using this code in the widgets content block:

  
   Hi there! We're Alli & TJ, an Oregon couple who left behind the 9 to 5 to explore the world and enjoy life one adventure at a time. Find out the rest of our story here!  
  

  However, now when you view it on tablet or mobile it appears slightly to the left and not centered under the Title. Any suggestions for centering it?
  **The widget in question is down below the featured content on our home page.

  Thanks!
  TJ & Alli

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

• 

  dragoso · Member · Mar 25, 2017 at 7:34 pm

  • Copy link

  Hi there,

  Try to add in your div style the following:

  margin: auto;

  so your code become:

  <div style="border:2px solid #000000;width:235px;padding:.4em;margin: auto;"><img src="https://lifeismeantforexploring.files.wordpress.com/2017/03/dsc_0301.jpg" />
  <P><p style="text-align:center;"> Hi there! We're Alli & TJ, an Oregon couple who left behind the 9 to 5 to explore the world and enjoy life one adventure at a time. Find out the rest of our story <a href="http://lifeismeantforexploring.com/welcome-to-life-is-meant-for-exploring/about/">here!</a>  </P>
  </div>

  Let me know if now everything appears as expected.

  Have a good one :)

• 

  lifeismeantforexploring · Member · Mar 25, 2017 at 9:17 pm

  • Copy link

  Thanks, this worked perfectly!

  We noticed that there is a very faint grey box around all of the sidebar widgets. This is something that came preset to the Pena theme. Is there a way to change the color of that with CSS, so that they are more visible?

• 

  dragoso · Member · Mar 25, 2017 at 9:26 pm

  • Copy link

  Hey there! Glad to hear it worked as expected.

  Regarding widgets border, I think this is the code you must add in your CSS Customizer to change the color:

  #secondary .widget, #secondary .widget-title, .author-info, .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation, .sticky, div#infinite-handle {
      border-color: 000000;
  }

  where 000000 is the border color ( example 000000 is black, ffffff is white ).

  Custom CSS is part of Custom Design, which is a feature of the WordPress.com Premium and WordPress.com Business plans. You can add custom CSS to your WordPress.com blog using the CSS Editor in My Sites → Customize → CSS in your blog dashboard.

  Have a good one! :)

• 

  lifeismeantforexploring · Member · Mar 26, 2017 at 12:17 am

  • Copy link

  Hmm that didn’t seem to have any effect. Any thoughts?

  Thanks,
  TJ & Alli

• 

  sewingpattern · Member · Mar 26, 2017 at 2:48 am

  • Copy link

  Hi TJ & Alli,

  I think that maybe the above snippet is missing a pound sign (#) before the “ffffff” for border-color. Try adding the # sign like below, or simply try copy and pasting this snippet into your CSS Customizer:

  #secondary .widget, #secondary .widget-title, .author-info, .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation, .sticky, div#infinite-handle {
      border-color: #ffffff;
  }

  I dunno if that will help, but thought I’d take a stab at it! All the best :)

• 

  sewingpattern · Member · Mar 26, 2017 at 2:51 am

  • Copy link

  Ah, and as dragoso mentioned, change “#ffffff” to “#000000” for black, or your preferred color hexcode. #ffffff will make it white

• 

  lifeismeantforexploring · Member · Mar 26, 2017 at 3:08 am

  • Copy link

  Thank you so much. This worked perfectly!

• 

  lifeismeantforexploring · Member · Mar 26, 2017 at 3:13 am

  • Copy link

  Actually, just noticed that this also placed a box around the first post on our “Adventure Blog”. Any thoughts on why that is? And how to fix it?

• 

  sewingpattern · Member · Mar 26, 2017 at 3:58 am

  • Copy link

  Ah, so close!! The reason it colored the border of the first post is because the above snippet targets several different elements (listed by comma) that are originally styled in the same way. I think if we omit the “.sticky” class, it will stop that one box from having a black border… Please try replacing the former code snippet with this:

  #secondary .widget, #secondary .widget-title, .author-info, .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation, div#infinite-handle {
      border-color: #000000;
  }

  But definitely let me know if that causes other complications, or if you notice any other elements that also gained a colored border!

• 

  lifeismeantforexploring · Member · Mar 26, 2017 at 4:08 am

  • Copy link

  Worked like a charm. You rock!

  Thanks,
  TJ & Alli

• 

  sewingpattern · Member · Mar 26, 2017 at 4:09 am

  • Copy link

  Woo hoo, I’m happy it worked! :D