WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Center Image Link Problem (9 posts)

  1. robin.resine
    Member
    Posted 8 months ago #

    hi this is the page where there is the issue ( at the bottom of the page ) : http://resinemedia.net/ecoleescoulen/formations/formations-longues/

    I tryed the alignleft and right, the image link is not a problem.
    But when I do an aligncenter the link takes the full width of the page, I tryed doing that on other pages, and it does the same thing.
    I also just saw that the link takes the full width of a widget as well when i do an align center in a widget).
    I run the theme responsive in the 1.9.3.2 version instead of 1.9.3.3 because i'm actually trying to find all the added code in header.php/style.css to edit my child theme so I don't lose my work.
    Do you think the fact i'm not running the latest version might be the problem ? I've been using this version for a couple of weeks and the problem has only starting occuring today.

    Thank you for your help
    Robin

  2. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    What are you trying to do? Which image are you talking about?

  3. robin.resine
    Member
    Posted 8 months ago #

    I'm trying to have my image with a correct link on hover, if you check the hover for the alignleft and alignright image, there is no problem, but for the aligncenter, the image link on hover takes the full page width.
    Which could be "ok" (not really), but i'm rather picky for this and I would like the link to be only on the image itself, not the page background.
    I think it might be a problem with the theme not being updated, or it might be a problem with an aligncenter css code, or link aligncenter code, but I'm not enough experienced to go there and find the solution.

    Thanks for taking time to help me out
    Robin

  4. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    That image is inside a paragraph - which is, by default, full width:

    <p style="text-align: center;">

    The other images are in paragraphs as well - which really isn't ideal.

    Using inline CSS isn't a great way to approach layout - it'd be better to simply put those images in divs and position them using external CSS.

    BTW, you also should not be using tables for layout purposes - that's quite outdated and not good practice.

  5. robin.resine
    Member
    Posted 8 months ago #

    Thank you very much, i will do the code tomorrow, and for the tables, I don't use them exept for ordering images, this text will probably be modified I didn't write it.
    Thank you very much for the help =)
    Robin

  6. robin.resine
    Member
    Posted 8 months ago #

    I actually followed your instruction, but even by changing the code like so : from (which is the WP usual insert image code) :

    <p style="text-align: center;"><a href="http://resinemedia.net/ecoleescoulen/accueil/inscription/"><img class="aligncenter size-full wp-image-1291" alt="bouton-2" src="http://resinemedia.net/ecoleescoulen/wp-content/uploads/2013/06/bouton-2-e1374658687624.png" width="196" height="147" /></a></p>

    to :

    <a href="http://resinemedia.net/ecoleescoulen/accueil/inscription/"><img class="aligncenter size-full wp-image-1291" alt="bouton-2" src="http://resinemedia.net/ecoleescoulen/wp-content/uploads/2013/06/bouton-2-e1374658687624.png" width="196" height="147" /></a>

    what should i modify to have it work, since the alignment doesn't seem to be a problem but the link area seems to work weirdly, I think it may either be a plugin confligt or something wrong in the code, but I have really no clue.
    Thank you for your help
    Robin

  7. Ben Sibley
    Member
    Posted 8 months ago #

    Robin,

    Your image has the following CSS properties:

    margin-left: auto;
    margin-right: auto;
    display: block;

    Remove both the margin properties and set the display to inline-block:

    display: inline-block;

  8. robin.resine
    Member
    Posted 8 months ago #

    Hi Ben, thanks for your help but I think that this code is suposed to change something for the aligncenter ? That actually didn't change anything for the link itself, the align center is working correctly but the problem is the link being full width ( going out of the image it self, when I do an aligncenter )
    Do you have any clue to solve this ? I find it really weird being the only one to actually have this issue ( maybe not, but none of the solutions seem to work yet, btw didn't do the latest 3.6 WP update, i'll be waiting for my main plugins to update before I do so. )
    Hope to find a solution soon, trying to find something in the style.css with out any solutions yet.
    Thank you again
    Robin

  9. Ben Sibley
    Member
    Posted 8 months ago #

    Robin,

    It looks like you figured it out, but I saw there's still a bit of clickable area above and below the image. If you want to get rid of that just take your image out of the <p> tags and put it into <div> tags.

Reply

You must log in to post.

About this Theme

About this Topic