I know this is a pretty silly question, but I keep struggling getting this to work.
I’ve made 4 social buttons with the help of div/background-image (with :hover).
What I’m trying to do is to place these 4 buttons on one row, with responsive abilities.
I am using a 20% left/right padding on all content of that particular page. Which screws the buttons up when I have to use “Raw HTML” to keep WordPress from separating the linking from the <div>s.
My solution for keeping these buttons within the same content-width (20% padding on each side) is to have the “Raw HTML” element within a “Row” with the 20% padding class applied to it.
This was working just fine, until I started resizing my browser window. (see screenshots)
Raw-html:
<a href="skype:username"><div id="skype"></div></a><div id="facebook"><a href="https://facebook.com/user" target="_blank"></a></div><span class="rsp2"><br><br><br></span><a href="https://no.linkedin.com/in/user" target="_blank"><div id="linkedin"></div></a><a href="mailto:[email protected]"><div id="mail" style="margin-right:0px !important;"></div></a>
How the css-structure of the buttons are:
#skype {
background-image: url('/wp-content/uploads/2014/03/skype_160x45.jpg');
height: 45px;
width: 160px;
float:left;
margin: 0 20px 20px 0;
}
#skype:hover {
background-image: url('/wp-content/uploads/2014/03/skype_160x45_hover.jpg');
}
Is there a better solution to this, or is there a fix to this?
Thank you!
Attachments:
You must be
logged in to view attached files.
.