WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve Images Outside Article Border (8 posts)

  1. wendysahl
    Member
    Posted 2 months ago #

    Hi, I have a border around my .site-content article and for some reason the images inside the article (post) are not included inside the border, they go over the border line at the bottom...what should I do so that the borders go around the text and the images?

    .site-content article {
    	border: 1px solid #afbfc3;
    	margin-bottom: 72px;
    	margin-bottom: 5.142857143rem;
    	padding-bottom: 24px;
    	padding-bottom: 1.714285714rem;
    	padding-left: 10px;
    	padding-left: 0.71428571rem;
    	padding-right: 10px;
    	padding-right: 0.71428571rem;
    }

    *Yes, I have a child theme

  2. wendysahl
    Member
    Posted 2 months ago #

    If I have text that is long enough that it continues below the image then the image is included within the borders. So for some reason it's like it's not really part of the post or the styles for that post...?

  3. wendysahl
    Member
    Posted 2 months ago #

    I found this in the forums and thought perhaps it would be an adequate band-aid but it doesn't help at all. The images are still appearing and overlapping over the bottom border line.

    @media screen and (max-width: 480px) {
    	.entry-content img {
    		float: none;
    	}
    }

    The code above is from here.

  4. wendysahl
    Member
    Posted 2 months ago #

    The images still overlap the borders. I am not able to format the text part of any given post to appear below the images in order to push the border below the images as well. I've tried this in both the visual and text edit options. In the end I've temporarily placed a horizontal line under the image to force the border below it. I've been using twenty twelve for a long time and haven't run into this issue. I took the site over from someone else who was stuck/lost in their attempts to customize it. I've deactivated all of the plugins but perhaps there is something they might have installed to help them edit it in a what you see is what you get sort of a way that I'm over looking. If this is an ongoing problem with the images in posts and borders in the theme Twenty Twelve and there is a fix to the code I'd love to know what it is. If this is NOT a normal problem in Twenty Twelve and something that is lurking underneath from the original attempts to style/customize the site then at least I know where to go back and look again.

    Thanks!

  5. bcworkz
    Member
    Posted 2 months ago #

    Please provide a link to a post that illustrates the problem. CSS issues are almost impossible to diagnose without being able to load the page for analysis.

    BTW, AFAIK there is no unit of measure in CSS called "rem". There is an "em", the m-width of the applicable font. The "r" is probably just ignored but using correct syntax before attempting troubleshooting is never a bad idea.

  6. wendysahl
    Member
    Posted 2 months ago #

    I'm sorry, I am unable to link to the post because it's a site that the client has hidden "under construction," I agree that makes it difficult to help with. Whether or not there is a measure in CSS called "rem" it's all the way through the twenty twelve theme! I just include it since it's included in the default twenty twelve and if it's not included then the child theme doesn't override aspects of the parent theme. From my point of view it's just there. I'm not a developer or anything. If it's wrong probably someone should fix it, I have an appreciation for clean coding or best practices.

  7. bcworkz
    Member
    Posted 2 months ago #

    I'm sorry too, without a live example, I cannot offer any suggestions. I wondered if a simple complete copy of a page would suffice, but it appears copies are incomplete despite being labeled as "HTML Complete". You could try making a copy anyway, if at least the overlap issue is properly rendered, it may not matter if other portions are fouled up.

    The copy and its associated folder could be placed on any publicly accessible server, a WP installation is not needed.

    I haven't really kept up on all of the latest CSS3 aspects, part of which it turns out are "rem" units. http://snook.ca/archives/html_and_css/font-size-with-rem

    I guess there is some homework I neglected to do :(

  8. wendysahl
    Member
    Posted 2 months ago #

    I'm sure you still know way more than I do, rem or otherwise! I'm still trying to fix the border issues. I had them working on a regular screen but they won't play nice on tablets and phones...

Reply

You must log in to post.

About this Topic