Hyperlinks overlap 'Read more' button?

  • axendadmin

    (@axendadmin)


    10 years, 1 month ago

    Hi,

    On my website, I have displayed different companies within boxes with an image on the top left, a short description, as well as a ‘read more’ button on the bottom right which links to the company’s website.

    I want to hyperlink two documents, that will enable visitors of the site to download these documents. In the ‘edit page’ section, I type ‘Download Brochure’ and hyperlink it to the document after the short description and I align it to the left, so there would be a hyperlink on the bottom left and the ‘read more’ button on the bottom right of the box. But when I click update, and I look at the page, the hyperlinked text and the ‘read more’ button on the bottom right of the box is overlapping for some reason. Is there a way to fix this?

    PS. I am not very good with code.

    Website – axend.biz – and the particular page is axend.biz/tpt/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Anonymous User 14885823

    (@anonymized-14885823)

    10 years, 1 month ago

    Hello!

    Right now, you have some CSS that will position any link inside the “product box” near the bottom right corner. The “Download Brochure” and “Download Data Sheet” links and the Read More button have the same positioning because of that.

    Are you able to edit your CSS?

    Thread Starter axendadmin

    (@axendadmin)

    10 years, 1 month ago

    <a href="http://axend.biz/wp-content/uploads/2015/07/Download-Brochure.pdf">Download Brochure</a>

<a href="http://www.tpt-wirebonder.com/uploads/media/HB70_Datasheet_02.pdf">Download Data Sheet</a>
<a href="http://www.tpt-wirebonder.com/en/die-bonder.html"><img class="margin_left alignnone" src="http://www.axend.biz/wp-content/themes/axend/images/readmore3.jpg" width="103" height="28" /></a>

    Is this the CSS??

    Anonymous User 14885823

    (@anonymized-14885823)

    10 years, 1 month ago

    Those are the HTML links for your Brochure, Datasheet, and Read More buttons.

    Maybe the easiest way for you to add CSS would be through a custom CSS plugin. For example, Simple Custom CSS. This is a short guide from WPBeginner on adding Custom CSS to your site.

    Basically, you will want to add something like the following to your custom CSS..

    .brochure-link {
    left: 5px;
}

.datasheet-link {
    left: 150px;
}

    then add those CSS classes to the links in your HTML… so the links would become (note the class added to each one)

    <a href="http://axend.biz/wp-content/uploads/2015/07/Download-Brochure.pdf" class="brochure-link">Download Brochure</a>
<a href="http://www.tpt-wirebonder.com/uploads/media/HB70_Datasheet_02.pdf" class="datasheet-link">Download Data Sheet</a>

    The CSS rules in the first part tell the links where they should be positioned. So first you are creating styling rules, then applying them to the links.

    Good luck!!!!

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

The topic ‘Hyperlinks overlap 'Read more' button?’ is closed to new replies.