Hi all,
I have just added social media links to my blog http://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="http://princessoffinland.com/wp-content/themes/themify-base-child/twitter12.png" width="25" height="25"/>
<img style="padding-right:8px"/>
</a>
<a href="http://www.pinterest.com/prncsoffnlnd/" target="_blank">
<img src="http://princessoffinland.com/wp-content/themes/themify-base-child/pinterest11.png" width="25" height="25" />
<img style="padding-right:8px"/>
</a>
<a href="http://www.instagram.com/princessoffinland" target="_blank">
<img src="http://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: http://www.princessoffinland.com/
Description: This is a child theme for Themify Base POF
Author: Lisa Illik
Author URI: http://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%;
}
}