WordPress.org

Ready to get started?Download WordPress

Forums

twenty fourteen: aligned images fall into margin at some page widths! (16 posts)

  1. grayson.king
    Member
    Posted 3 months ago #

    I'm seeing a problem with left or right aligned images in twenty fourteen that's dependent on the width of the browser window. When the browser window is narrow enough (<800px or so with my current settings), all images display in line with the content text as desired. But with a wider browser window, left or right aligned images move into the margins, and in some cases (especially with modified settings for content width etc) portions of images will flow off the browser window altogether where they're not even visible! I've tested this in Chrome and FireFox with the same result.

    To see what I'm looking at, check the following page:
    http://poleclinometer.com/wp/use/

    Also, I've uploaded screenshots of the problem exactly as I see it on my browser to the following path:
    http://poleclinometer.com/temp/wp-aligned-image-problem/

    I suspect and desperately hope that there's some simple code I can include in my child style.css file or similar to fix this problem, and I sure hope someone here can help me with it because I'm stumped and Google has yielded no solution. Thanks for reading this far! :)

  2. grayson.king
    Member
    Posted 3 months ago #

    Bump, and quick update....

    I've moved/redirected my WordPress site, so the first link I provided originally is now broken. The correct link is as follows:

    http://poleclinometer.com/use/

    Still hoping somebody might be able to provide some assistance with this rather obnoxious little problem. Please help if you can! :)

  3. grayson.king
    Member
    Posted 3 months ago #

    Bump. Can anybody help me??

  4. Jay Mayu
    Member
    Posted 3 months ago #

    I checked your site in chrome. The images looks fine, they didn't go out of margin. Only issue is that your body is left aligned. No idea why you made it that way.

  5. grayson.king
    Member
    Posted 3 months ago #

    Thanks for looking Jay. Not sure how you're not seeing the problem. I've checked in Chrome and Firefox and now even Internet Explorer on multiple machines, and ALL exhibit the exact same problem. Did you look at the screenshots I provided to see a clear example of the problem as I see it?? This problem is persistent, and I cannot for the life of me figure out how to fix it. Really hoping somebody can help.

  6. Evan Herman
    Member
    Posted 3 months ago #

    Please stop bumping as it is against forum rules.

    I'm also not sure what your referring too as the images appear fine to me in Chrome.

  7. grayson.king
    Member
    Posted 3 months ago #

    Thanks Evan. And sorry for the bumping. I'm beginning to suspect that the "problem" I'm reporting may be a "feature" of twenty fourteen, and that's why it looks "fine" to you guys. But I'd still like to find a way to turn it off, because it's NOT the desired behavior I'm looking for.

    Can you please have a look at the screenshots I provided initially to see a clear example of what I'm describing as the "problem"? The only difference between the "good" and "bad" screenshots is that I changed the browser window's width just slightly.

    I'm very frustrated that I can only get left or right aligned images to display the way I want them to at certain browser window widths! I now suspect that twenty fourteen is specifically designed to move left or right aligned images into the margins at certain browser widths. But I want to turn that feature OFF if at all possible. Clear?

    Thanks again for looking. Could you please have a look at the screenshots I provided, and then look at the site again while changing the width of your browser window? I'm confident you'll see the problem/feature/issue I'm describing.

  8. grayson.king
    Member
    Posted 3 months ago #

    OK y'all, I'm coming around to viewing this as a "feature", and I've reworked my site a bit to take advantage of it, and essentially work *with* it rather than *against* it. Basically, if I left or right align ALL of the images on a page, then everything looks consistent. So even at browser screen widths where the images fall into the margin, when they *all* do, everything looks fine, rather than looking like one image is misplaced with respect to the rest of the page content.

    So I'm good for now, and am not in urgent need of a solution. HOWEVER, I'm not marking this as "resolved" yet for two reasons:

    1. I still think it'd be nice to be able to control or tune this feature, and/or turn it off altogether, rather than just accepting how the twenty fourteen theme chooses to behave in this regard.

    2. There is still a major problem with this when I tweak settings in twenty fourteen. When I set content width to something wider than the default 474px, things get really wonky, and instead of my aligned images just falling into the margin a bit, they go completely off the screen at certain browser window widths, where they're totally invisible, or only a small portion of them is visible. This behavior is clearly NOT by design, and I'd consider it a significant bug.

    I'm not going to take the time now to capture this last point in screenshots. But I'd still like to keep this thread marked "unresolved" in hopes that somebody, at some point, will explore this issue and maybe find an elegant solution.

    Sincere thanks to you who looked at this, and especially to you who responded.

  9. rain_frog
    Member
    Posted 3 months ago #

    I'm having the exact same problem. Images are pushed so far right that part of the image and caption floats in the margins where the background is. The edge of the image does not align with the edge of the text. I have not been able to find any resolution to the problem either.

  10. DavidFromOttawa
    Member
    Posted 2 months ago #

    I had the same problem. I used Fourteen Extended plugin to make the page content wider. I set Content Max-width to 874. When the browser window is wide, the left and right floating images protrude outside the container. This seems to be a design feature, but it only works with the narrower content width.

    The problem is in Twenty Fourteen's style.css, where, for the widest browser width, it sets margin-left or margin-right to -168px. You could just comment out this line in style, or preferably, create a child theme as follows:

    /*
     Theme Name:   Twenty Fourteen Child
     Theme URI:    http://www.petrieisland.org/wp/twenty-fourteen-child/
     Description:  Twenty Fourteen Float Image Fix
     Author:       David Villeneuve
     Author URI:   http://www.petrieisland.org
     Template:     twentyfourteen
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
     Text Domain:  twenty-fourteen-child
    */
    
    @import url("../twentyfourteen/style.css");
    
    /* =Theme customization starts here
    --------------------------------------------------------------
    
    When I used the Fourteen Extended plugin to widen the content area of pages,
    (by default 474px, I increased to maximum of 874px)
    it caused images to float outside of the page boundary.  This also occurred
    if I used columns or boxes.
    The fix below will keep the left or right aligned images inside the container.
    The only change is margin-left and margin-right were -168px, now 0px.
    David Villeneuve 8 June 2014.
     */
    
    @media screen and (min-width: 810px) {
    
    	.full-width .site-content blockquote.alignleft,
    	.full-width .site-content img.size-full.alignleft,
    	.full-width .site-content img.size-large.alignleft,
    	.full-width .site-content img.size-medium.alignleft,
    	.full-width .site-content .wp-caption.alignleft {
    		margin-left: 0px;
    	}
    
    	.full-width .site-content .alignleft {
    		clear: left;
    	}
    
    	.full-width .site-content blockquote.alignright,
    	.full-width .site-content img.size-full.alignright,
    	.full-width .site-content img.size-large.alignright,
    	.full-width .site-content img.size-medium.alignright,
    	.full-width .site-content .wp-caption.alignright {
    		margin-right: 0px;
    	}
    
    	.full-width .site-content .alignright {
    		clear: right;
    	}
    }
  11. VisualEdgeCreative
    Member
    Posted 2 months ago #


  12. TJTREM
    Member
    Posted 2 months ago #

    I do not know if this is good coding or not but this seems to have worked for me on my home page.

    http://www.backhomestylesforliving.com

    [Moderator Note: Please ensure that you are embedding links correctly in your posts. Link corrected.]

    <div style="margin: 0px 10px 0px 0px;">
    <h2 style="text-align: left;"></a><a href="http://www.backhomestylesforliving.com/wp-content/uploads/2014/06/Candy.png"><img class="wp-image-703 alignleft" alt="Old fashion Stick Candy" src="http://www.backhomestylesforliving.com/wp-content/uploads/2014/06/Candy-200x200.png" width="120" height="120" /></a><strong><em>TEXT HERE</em></p>
    
    </div>
    <div style="margin: 0px 10px 0px 0px;">
    <h2 style="text-align: left;"><a href="http://www.backhomestylesforliving.com/wp-content/uploads/2014/06/Two-Tier-Pine-Wine-Rack.png"><img class=" wp-image-723 alignright " alt="Two-Tier-Pine-Wine-Rack" src="http://www.backhomestylesforliving.com/wp-content/uploads/2014/06/Two-Tier-Pine-Wine-Rack.png" width="61" height="136" /></a></strong><strong><em>TEXT HERE </em></p>
    
    </div></strong>

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum's parser.]

  13. sunkissmarc
    Member
    Posted 1 month ago #

    Install "Advanced Image Styles" plugin and then align image as you would like (left or right) but under Advanced Options - Image Margins add "1" to left or right as needed to get the correct position for your image.

  14. mtilbury
    Member
    Posted 2 weeks ago #

    Does Advanced Image Styles work with 2013 Theme? I installed the plug in, but doesn't seem to be a way to use it.

  15. sunkissmarc
    Member
    Posted 2 weeks ago #

    mtilbury,
    I don't know if there is any problem with specific themes. I'm using it on 2014 theme and it works fine.

    Be sure to have at least a "1" in the margin field. If you don't see a place to insert a number you will have to expand the Advanced section.

  16. Andrew
    Forum Moderator
    Posted 2 weeks ago #

    If you need support make sure to create a new thread to discuss your own issues.

Reply

You must log in to post.

About this Topic