• Resolved henrylemmon

    (@henrylemmon)


    Hello everyone,
    My site at henrylemmon.com has a image that is aligned left on the home page (I like the way the text wrap looks). All looks great until you size the viewport to a specific size you end up with tiny bits of the body text to the right of the img, it kinda looks like a wierd caption or somthing, I have tried a media querrie, but it seems as though I can not effect the properties of the img, or I would just change the property at a certain break point and all would be well. Does anyone know how to deal with this issue?
    Thank you!
    henryLemmon>

Viewing 15 replies - 1 through 15 (of 18 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’d set a 480px or smaller media query to float: none; the image.

    Thread Starter henrylemmon

    (@henrylemmon)

    Wow that was fast, thank you for your response. can you please read the updated version of my quandry?

    Thread Starter henrylemmon

    (@henrylemmon)

    I was under the assumption that media querries only effected background images but not inline img tags, or embeded img tags.??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think that assumption is wrong, Twenty Twelve uses a mixture of block and inline elements with media queries. Try searching your Twenty Twelve stylesheet for “media” and see what I mean.

    Thread Starter henrylemmon

    (@henrylemmon)

    Can you change the float from left to none, on a image that is embedded in a post,and gets its float left property from .alignleft which is located in the style.css in the parent theme by using a media querrie?

    here is what i used:

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

    I have this added in the style.css file in my child theme.
    I have also added a id to the html in the body of the message that assigns the .alignleft to the element an tried to use the id to change the propertie as well.

    Thread Starter henrylemmon

    (@henrylemmon)

    Thank you Andrew, You kept me trying and I see the errors in my ways, so now it works. Let me perfect the exact breakpoints locally and then add them to my site. Then I will set this as resolved.
    thanks again
    henryLemmon>

    Thread Starter henrylemmon

    (@henrylemmon)

    I can make the queries work localy but when I upload the changes to the server they do not show on the site

    Thread Starter henrylemmon

    (@henrylemmon)

    This is what I have at the end of the style.css file in my child theme:

    /* To make my front page respond correctly to various screen sized with the p wrap
    --------------------------------------------------------------------------------*/
    @media screen and (max-width: 480px) {
    	.alignleft {
    		float: none; !important
    	}
    }
    @media screen and (min-width: 600px) and (max-width: 750px) {
    	.alignleft {
    		float: none; !important
    	}
    }

    it works localy but not when I change the style.css on the server in bluehost.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your CSS syntax is slightly wrong, but I don’t think you want to be applying the style to alignleft. This’ll probably affect everything that has the class alignleft, not just the image you want.

    Try this CSS instead;

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

    Thread Starter henrylemmon

    (@henrylemmon)

    I made the recommended changes to the file, but it still only works local.
    I will get on the horn with bluehost and see if they have any idea what is going on.

    Thread Starter henrylemmon

    (@henrylemmon)

    wow what a situation.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Whereabouts are you adding the CSS?

    Thread Starter henrylemmon

    (@henrylemmon)

    to the bottom of the style.css located in my child theme

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks okay, no syntax errors in your CSS. Let us know what your hosts say about it.

    Edit: Also, try disabling plugins to explore whether any could be responsible.

    Thread Starter henrylemmon

    (@henrylemmon)

    The host got me on hold as he refers the issue to there css tech, and I will disable plugins to see what effect that has.
    be back!
    henrylemmon>

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘twentytwelve align img post or page’ is closed to new replies.