Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello!

    I have checked Your site, I am not sure why is this happening, but there is a weird css rule that causes the image not aligning properly.

    Here is the css code which will fix this for you:

    div.entry-content img.alignright {
    	margin-right: 0px !important;
    }

    If you have some plugin for applying custom css (for example, Jetpack has this kind of functionality), please copy this code snippet there. If you don’t have anything like that, pleas install the Simple Custom CSS plugin, after that please go to Appearance->Custom CSS and paste the code there, and click save.

    Let me know if you have any more questions, I am happy to help.

    Greetings,
    Balint

    Thread Starter jfsturtz

    (@jfsturtz)

    Hi — thanks for the speedy reply. I had thought that either:

    1. I fundamentally misunderstood what I was doing, or
    2. I was crazy

    I’m glad to find out it is neither (although this doesn’t necessarily mean I’m not crazy, I guess). I wonder if it would behave better if I used a different theme? I am not very far along on the development of this site, and not necessarily set on what I’ve got so far.

    Anyway, thanks for the help. If necessary, I’ll add custom CSS.

    /John

    Hello!

    I am glad we could resolve the issue ??

    I don’t think that the theme is the cause of this, if I am not mistaken, You are using the Twenty Fourteen theme, which is one of the default themes for WordPress, meaning that it is a queality theme and should not produce this kind of weird issues…

    I think what happened is that You have copy-pasted the text from Your current website, and by doing this, You have copied some CSS from that site too (the block that holds the 5 images on the right side has some very similar code that caused the wrong image placement on Your WordPress site).
    The best way to avoiding these kind of situations is by copying the text from Your current site, and pasting it into some plain text editor (for example Notepad if You are on Windows), and from Notepad copying the same text again. This way You clean out all the invisible code that You may be copying.

    By the way I really like where You are going, keep up the good work! Sometimes WordPress can be a little bit weird or overwhelming, but I think this is currently the best tool out there for Your website ??

    If you have any more questions, I am more than happy to give a hand!

    Greetings,
    Balint

    Thread Starter jfsturtz

    (@jfsturtz)

    Hello again Balint. Thank you for the continued help.

    I’ve had an interesting afternoon looking into this:

    I deleted the page in question and created a brand new one. Then I copied the text from the old website, pasted into Notepad, re-copied and pasted into the page like you suggested. Then I re-inserted the images, with the top one left-aligned, and the bottom one right-aligned. Now neither of them aligns with the text — the top one sticks too far to the left, and the bottom one too far to the right:

    https://www.dropbox.com/s/4jbamx9p87npi62/SNAG-14111316014500.png?dl=0

    Then I added the CSS code as you suggested; that fixed the bottom one. I had to also add

    div.entry-content img.alignleft {
    	margin-left: 0px !important;
    }

    to get the top one to align properly.

    I also tried switching to the Twenty Twelve theme, and it seems to work fine, even without the added CSS. Possibly because Twenty Fourteen has the Primary Sidebar on the left, and Twenty Twelve doesn’t?

    In any case, it seems I have a couple ways to work around the problem, even if I don’t fully understand it …

    Thanks again.

    /John

    You are welcome! I am sorry that it was this challenging experience for You ??

    In any case, I am happy that You have successfully resolved it ??

    If I can assist You in any other way, just drop a line.

    Greetings,
    Balint

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Trouble aligning images with text’ is closed to new replies.