Docs

[adriangregory]

Hi

I’ve got my social icons in the logo bar and need some help with positioning them. In medium screens like laptops they appear exactly right but on larger screens they appear too far in from the edge of the screen. Up to about 1250px screen width they are good but is there some CSS I could use to get them to be closer to the edge on screen widths above this?

Address of my test site is http://www.portsmouthmusicacademy.co.uk/cms

Many thanks

[Christian]

Hey there,

I see you already have a media query (min-width: 980px). Just add a min-width media query for 1250px and give your element a negative position right value.

Thanks.

[adriangregory]

Hi

Thank you for your quick reply. I’ve tried your suggestion by adding the following but it doesn’t seem to have any effect apart from messing up the social icons in mobile view.

@media only screen and ( min-width: 1350px ) {
.c-social {
position: absolute;
right: -50;
}

Am I missing something?

[Rupok]

Hi there,

Thanks for writing back. It’s because the container max-width is 1200px. Let’s use this CSS :

@media only screen and ( min-width: 1350px ) {
.x-logobar .x-container {
	position: relative;
	width: 95%;
	max-width: 100%;
}
.c-social {
	position: absolute;
	right: 0;
}
}

Hope this helps.

Cheers!

[adriangregory]

Perfect! Thank you as always for your brilliant support.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts