CODEWITHSUNDEEP
htmlcsswordpress
tristanojbacon
tristanojbacon

Reputation: 456

Fixing FB Like button in position on top of image (responsively)

I am trying to fix a Facebook Like button to a particular position on top of a header image on WordPress, but am having trouble with the CSS styling (and potentially id's vs classes)

On this website, I want to place a Like button below the 'Join us Now' text in the blue section of the image header image.

I tried to create a seperate div class and position it, but my knowledge of fixed/absolute/relative is pretty shoddy, to say the least. It did an absolute position, but it doesn't stay with the image when I resize the browse window. (We're targeting young students for our campaign, and so a lot will be visiting our sites from small laptop screens and smartphones, so has to be responsive)

Does anyone have any idea how I can do this?

Thanks :)

Upvotes: 0

Views: 629

Answers (1)

Mikael Kessler
Mikael Kessler

Reputation: 1235

Edit the layout of your HTML elements so that your like button is positioned below your main image link like this:

<div id="header-banner" style="width:100%;height:300px;">
  <a href="http://www.w4u.org.uk/">
    <img src="http://www.w4u.org.uk/wp-content/uploads/2013/02/copy-home-banner.jpg" class="header-image" width="960" height="250" alt="">
  </a>
  <div class="fb-like"></div>
</div>

Once that's in place adjust the CSS for the like button by adding this to your inline style that's already in place:

top: -98px;

Here's an image of what it should look like after you make the changes:

Upvotes: 2

Related Questions