Positioning Icons (via Text Widget) at top of page

  • Author
    Posts
  • #1118331

    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.

    #1118467

    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 :(

    #1118880

    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;
    }
    #1118925

    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!!!

The topic ‘Positioning Icons (via Text Widget) at top of page’ is closed to new replies.