Need help? Check out our Support site, then


Positioning Icons (via Text Widget) at top of page

  1. 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. 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. 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. 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.

About this Topic