WordPress.com

1. anothernicole
   Member
   Jan 8, 2013, 11:42 PM

   Hi,

   I've got several social media icons at the top of my blog (anothernicole.com; Suburbia theme), and I've done that by putting them into a text widget and positioning the widget at the top of the page. I used this:

   #container {
   	position: relative;
   }
   
   #text-360088270 {
   	position: absolute;
   	top: 78px;
   	right: 200px;
   }

   The problem is, the icons move all over the place depending on computer screen size/width, browser, etc. (So they look fine to me at home, but are WAY off at work, etc.)

   Is there a way to position the icons within the white border that is part of the header/theme? To sort of absolutely say: these icons will always be 17px (for example) from the edge of the white, no matter what the screen width is?

   Please forgive my naivete/inability. I'm really new to CSS, and I've basically just been picking up whatever I could on a need basis. Any tips or help anyone has, would be greatly appreciated.

   Thank you!

   Nicole

   The blog I need help with is anothernicole.com.

2. anothernicole
   Member
   Jan 8, 2013, 11:45 PM

   ps. I know I've asked about this in the past, and I am using the same CSS I used before, which worked in my previous theme... Sorry :(

3. designsimply
   Staff
   Jan 15, 2013, 2:32 PM

   Try setting the relative positioning on "#wrapper" instead of "#container" and adjusting the numbers a little like this:

   #wrapper {
   	position: relative;
   }
   #text-360088270 {
   	position: absolute;
   	top: 20px;
   	right: 20px;
   }

4. anothernicole
   Member
   Feb 12, 2013, 5:12 AM

   Ohmygoodness--thank you so much! This has been driving me crazy! (Sorry for my late reply; I didn't realize this had been answered). So many thanks!!!

Topic Closed

This topic has been closed to new replies.