How to remove the small line under picture link, when hovering over

  • Resolved princessoffinland

    (@princessoffinland)


    10 years ago

    Hi all,

    I have just added social media links to my blog https://www.princessoffinland.com and I noticed that there’s a small black line appearing under the first two picture links when hovering over.

    Could it be that this has something to do with the padding after the first two pictures?

    How can I remove these lines?

    See my header.php here:

    <?php
/**
 * Template for site header
 * @package themify
 * @since 1.0.0
 */
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<title><?php wp_title( '|', true, 'right' ); ?></title>

<?php
/**
 *  Stylesheets and Javascript files are enqueued in theme-functions.php
 */
?>

<!-- wp_header -->
<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<?php themify_base_body_start(); // hook ?>

<div id="pagewrap">

	<div id="headerwrap">

		<?php themify_base_header_before(); // hook ?>
		<header id="header" class="pagewidth">
        <?php themify_base_header_start(); // hook ?>
			<?php echo themify_base_site_title( 'site-logo' ); ?>

			<?php if ( $site_desc = get_bloginfo( 'description' ) ) :
				global $themify_customizer;
				?>
				<h2 id="site-description" class="site-description"><?php echo $themify_customizer->site_description(); ?></h2>
			<?php endif; ?>

			<nav>
				<div id="menu-icon" class="mobile-button"><i class="icon-menu"></i></div>
				<?php
				wp_nav_menu( array(
					'theme_location' => 'main-nav',
					'fallback_cb'    => 'themify_base_default_main_nav',
					'container'      => '',
					'menu_id'        => 'main-nav',
					'menu_class'     => 'main-nav'
				));
				?>
				<!-- /#main-nav -->
			</nav>

		<?php themify_base_header_end(); // hook ?>

		<div class="social-icons">

		<a href="https://twitter.com/prncsoffnlnd" target="_blank">
		<img src="https://princessoffinland.com/wp-content/themes/themify-base-child/twitter12.png" width="25" height="25"/>
		<img style="padding-right:8px"/>
		</a>

		<a href="https://www.pinterest.com/prncsoffnlnd/" target="_blank">
		<img src="https://princessoffinland.com/wp-content/themes/themify-base-child/pinterest11.png" width="25" height="25" />
		<img style="padding-right:8px"/>
		</a>

		<a href="https://www.instagram.com/princessoffinland" target="_blank">
		<img src="https://princessoffinland.com/wp-content/themes/themify-base-child/instagram13.png" width="25" height="25" />
		</a>

	</div>

		</header>
		<!-- /#header -->
        <?php themify_base_header_after(); // hook ?>

	</div>
	<!-- /#headerwrap -->
	</div>
	<div id="body" class="clearfix">
    <?php themify_base_layout_before(); //hook ?>
	</div>

</body>

    This is my style.css:

    /*
Theme Name: Themify Base Child
Theme URI: https://www.princessoffinland.com/
Description: This is a child theme for Themify Base POF
Author: Lisa Illik
Author URI: https://www.princessoffinland.com/
Template: themify-base
Version: 1.0.0
*/

@import url("../themify-base/style.css");

.social-icons {
	float: right;
	margin-top: -6.75%;

	}

/*Iphone screen*/
/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {*/
@media only screen and (max-device-width: 480px) {

	.social-icons {
	margin-right: 2.5%;
	margin-top: -12.25%;

	}

}

/*Ipad screen landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 

.social-icons{
    float: right;
	margin-top: -6.7%;

	}

}

/*Ipad screen portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

.social-icons{
    float: right;
	margin-top: -7.5%;

	}

}
Viewing 2 replies - 1 through 2 (of 2 total)
  • David Sword

    (@davidsword)

    you could add something like the following to the end of your style.css

    html body .social-icons a,
html body .social-icons a:hover {
    text-decoration: none;
}

    .

    You mention padding, look into using margin‘s instead when dealing with spacing of specifically-sized elements such as a row of social icons. Padding is more for inner&relative spacing within an element, whereas margins tend to be for spacing outside of an element. & this 

    <img style="padding-right:8px">

    isn’t standard, might want to deal with that.

    Thread Starter princessoffinland

    (@princessoffinland)

    Great, that worked! I also changed to margins instead of padding in between my elements.

    Thank you very much!

    Cheers

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to remove the small line under picture link, when hovering over’ is closed to new replies.