• Resolved Vox

    (@voxclamantis)


    I’m trying to change floated images into block elements for narrow screens (i.e. no text wrapping). Nothing seems to work.

    @media screen and (max-width:1200px)
    {div.entry-content img.alignleft,
    div.entry-content img.alignright
    {display:block;clear:both;}
    }

    I’ve tried many variations of screen conditions but I can get it to work. What am I missing?

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show us the problem on your site?

    Thread Starter Vox

    (@voxclamantis)

    https://www.voxclamantisindeserto.us/2016/11/why-i-wear-skirts/

    Basically–on this and another post–I want the p text to wrap the img on ample screens but not on a small screens. I would have thought that changing the img back to a block element would have worked, but no luck so far.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What do you want to happen on smaller devices?

    Thread Starter Vox

    (@voxclamantis)

    On large screens I want the img to float/align right with text wrapping left and under the img, which it does.

    On small screens the text wraps to awkwardly so I want the image then to appear as a block element by itself with no text wrapping. That is, as if the img were not floated/aligned (with at is, to mimic the default html/css behavior).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think one problem is that there is a hard-coded style of ‘float: right’ given to the image.

    Thread Starter Vox

    (@voxclamantis)

    OK, good catch. I removed it and the behavior improved, but then I found out why I had written that style into the img tag in the first place. For whatever reason, if img was the first element, WP nested it within an autonomously-generated p tag which caused the “<p>image</p>” to sit considerably higher than “<p>first paragraph</p>”. I suppose this relates to WP’s intended behavior whenever posts contain plain text paragraphs without markup, but it was an engineering oversight to fail to treat img as a permissible opening element.

    The bandaid that I originally applied back in 2016 (which you discovered and pointed out to me) was to put the img within the p element (i.e. “<p>wrapped paragraph text</p>”). So it turns out that to prevent WP from nesting img within the autonomously-generated p was to myself nest img with its own div.

    The styles are now behaving as I desired except for one thing: I can’t seem to get the img to center on a small screen. Any ideas?

    Thread Starter Vox

    (@voxclamantis)

    Hey Andrew, css is now rendering as intended. I couldn’t have done it without your help. ?Un millón de gracias para ti!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS to change img layout’ is closed to new replies.