Social buttons: is it possible to downsize them?

  • Resolved christianscazzieri

    (@christianscazzieri)


    6 years, 12 months ago

    Hello to everyone in the forum, I’d really like to know whether it is possible – and if yes, how – to slightly downsize the icons button that appear in the social menu in the lower part of the left navigation column.

    My problem is that, once you start to add social links to the menu, buttons own sizes force them to sit on two rows, making the whole aesthetically non very pleasent to my eyes. Has anyone experience over this?

    Many thanks in advance to everyone who will answer. ??

    Christian

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • I agree. One theme fix would just be to add bottom margin, but I’ve outlined two possible solutions below:

    Option A:
    Add margin to the existing code: If you go to style.css and look at line 444, add a line for 10px margin on the bottom, so that the code appears as so:

    .social-menu a {
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 50%;
	color: #fff;
	display: block;
	height: 40px;
	position: relative;
	text-decoration: none;
	transition: background-color .2s linear, color .2s linear;
	width: 40px;
	<strong>margin: 0 0 10px 0;</strong>
}

    Option B:
    Change the height and width of the social icons there so that they line up on a single line. Example below:

    .social-menu a {
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 50%;
	color: #fff;
	display: block;
	<strong>height: 50px;</strong>
	position: relative;
	text-decoration: none;
	transition: background-color .2s linear, color .2s linear;
	<strong>width: 50px;</strong>
}

    I agree. One theme fix would just be to add bottom margin, but I’ve outlined two possible solutions below:

    Option A:
    Add margin to the existing code: If you go to style.css and look at line 444, add a line for 10px margin on the bottom, so that the code appears as so:

    .social-menu a {
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 50%;
	color: #fff;
	display: block;
	height: 40px;
	position: relative;
	text-decoration: none;
	transition: background-color .2s linear, color .2s linear;
	width: 40px;
	margin: 0 0 10px 0;
}

    Option B:
    Change the height and width of the social icons there so that they line up on a single line. Example below:

    .social-menu a {
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 50%;
	color: #fff;
	display: block;
	<strong>height: 50px;</strong>
	position: relative;
	text-decoration: none;
	transition: background-color .2s linear, color .2s linear;
	width: 50px;
}
    • This reply was modified 6 years, 11 months ago by acroom.

    Can we add a heading or a text above sharing buttons?
    If yes, Then help me, please.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Social buttons: is it possible to downsize them?’ is closed to new replies.