Place Social Media Icons in Right Position « Support Forum | Kriesi.at

Support Forum » Sentence

Place Social Media Icons in Right Position

11 posts from 4 voices

Started 11 months ago by outtacontext
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

outtacontext
Member
I moved the social media icons from the header to the right sidebar. And I used this css to place them in the right position from the top of the page and from the right of the sidebar:
```
#top #sidebar_bg .social_bookmarks{
margin-top: 130px;
    position: absolute;
    right: 150px;
    z-index: 152;
}
```
Of course, it looks perfect when the browser is large. But as you reduce the size of the browser window the social media icons are in the wrong place (when you resize the window to the next smallest size).

How can I fix this for this size? (If the window size is even smaller the icons are hidden, which is fine.)

Also, in this situation, I want to move the menu items just a bit lower. How would I do that? Thanks.

The URL of my site is http://outtacontext.com/wp2
Posted 11 months ago #
Devin
Moderator

Hi outtacontext,

Open up your layout.css and search for:
/* #Media Queries

These are the css rules that changes the css based on the screen size so you can add an adjustment here for the social icons.

Regards,

Devin

Posted 11 months ago #
outtacontext
Member

Thanks Deven but I know already know that. I already tried putting in a css for repositioning the icons into the media queries area but it didn't work. That's when I contacted you.

Posted 11 months ago #
Devin
Moderator
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
@media only screen and (max-width: 959px) {}
                #top #sidebar_bg .social_bookmarks {
                margin-top: 110px;
                position: absolute;
                right: 110px;
                z-index: 152;
                }
```
I didn't see anything referencing the social icons in your current media queries so I assumed you didn't know about them. The above, when placed in either your custom.css or even directly into the layout.css file can be adjusted to your needs.

Regards,

Devin
Posted 11 months ago #

outtacontext
Member

I've encountered a problem. I did as you suggested and added the css above to my custom.css file. However, when I did, even though it sets the max-width up to 959px, adding this css placed the social media icons in that position for a larger screen.

So, then I decided to add css for each media query size. Like this:

@media only screen and (max-width: 959px) {}
                #top #sidebar_bg .social_bookmarks {
                margin-top: 110px;
                position: absolute;
                right: 110px;
                z-index: 152;
                }

@media only screen and (max-width: 757px) {}
                #top #sidebar_bg .social_bookmarks {
                margin-top: 30px;
                position: absolute;
                right: 20px;
                z-index: 152;
                }

@media only screen and (min-width: 1140px) {}
                #top #sidebar_bg .social_bookmarks{
				margin-top: 130px;
    			position: absolute;
    			right: 150px;
    			z-index: 152;
}

But that didn't work. The location of the icons seems to be ruled by the last media query css for all viewport sizes.

Can you help me out here? Thx.

Posted 11 months ago #

outtacontext
Member
Okay, I think I've solved the problem. The position of the social media icons seem to be controlled by this style, not the one above:
```
#top #sidebar_bg .social_bookmarks {right:107px; top: -16px; }
```
I saw that in the css of the Sentence theme example as I watched the icons shift in that example. I made the changes to one size of the media queries area and I created a new media query for a size that seems to be missing in the media queries area:
```
@media only screen and (min-width: 990px) and (max-width: 1139px)
```
This comes in between
```
@media only screen and (min-width: 768px) and (max-width: 989px)
```
and
```
@media only screen and (min-width: 1140px)
```
Is there any reason this intermediate size wasn't in the layout.css?

And one last question, so I'll be able to understand this a bit better. Why does this style work on a monitor that allows for the largest viewport:
```
#top #sidebar_bg .social_bookmarks{
			margin-top: 130px;
    			position: absolute;
    			right: 150px;
    			z-index: 152;
}
```
But doesn't work in reality when the positioning is adjusted in the media query tags for the smaller viewport sizes? (even though it worked if I made adjustments to it in Firebug)? What was preventing it from working?
Posted 10 months ago #
Ismael
Moderator

Hey,

This might help you understand media queries a bit more. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Regards,
Ismael

Posted 10 months ago #
HouseofStrauss
Member

I want to place the social icons in a similar way at the top of the sidebar. The conversation above seems to be incomplete in resolution, except for maybe to the asker outacontext.

Can you please clarify:

1- Which code should be transferred from the header to the sidebar.php?
2- What was the final CSS need to position these icons correctly?

Many thanks for assistance.

Posted 5 months ago #
Ismael
Moderator
Hi HouseofStrauss,

You don't need to transfer any html, if you haven't made any customizations yet, then try to add this code on your Quick CSS or custom.css:
```
@media only screen and (min-width: 960px) {
	#top #header .social_bookmarks {
		width: 280px;
		left: 770px !important;
		top: 80%;
	}
}
```
Just adjust the left value and top(the greater the value the more it is pushed on the bottom) value. Hope this helps. :)

Regards,
Ismael
Posted 5 months ago #
HouseofStrauss
Member

Whoa! amazingly simple and effective! Thank-you so much ... works perfectly.

Posted 5 months ago #
Ismael
Moderator

Hi HouseofStrauss,

That's our job. :) Glad we could help. :)

Cheers,
Ismael

Posted 5 months ago #