Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Layout of responsive images & text

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #254123
    Linda_A
    Participant

    At the moment, I am applying height: auto and width: 90% to the img tag itself to get images in blog posts to size down with the screen size. I don’t know whether this is the best approach or not, but it seems to work well enough, at least for centered images. However, it becomes more problematic if I want to float the images left or right and have text flow around them. Setting the width to 45% instead did restrict the image to one half of the page, but on larger screen sizes it produced unattractive results as the image was not large enough to fill its half and then it would of course not display centered within its half but pushed towards either side.

    Is it possible to work around this or is there a better solution?

    #254130
    Beverleyh
    Participant

    I’m not 100% sure what it is you’re doing, but try switching width:45%; for max-width:45%;

    For specific help, please provide a demo in CodePen to illustrate the problem.

    #254131
    Linda_A
    Participant

    Apologies, that should of course have been max-width in both cases, that’s what I tried with. It works fine to constrain the image to either 90% or 45% of the outer container, but if I use 45%, I’d like to be able to center the image within its half of the page as well. But I don’t know if you can first float something left or right and then center it within the left or right half of the page? Does that explain it? Its just at the draft stage, so I didn’t have a demo worked up yet as I don’t know if it is even feasible.

    #254164
    Atelierbram
    Participant

    Its just at the draft stage, so I didn’t have a demo worked up yet as I don’t know if it is even feasible.

    This logic doesn’t make much sense to me, because one of the reasons to make demo’s is to find out if something is feasible or not. Another reason may be to give insight in what you are trying to achieve to people on the forum here who are trying to help you.

    But I don’t know if you can first float something left or right and then center it within the left or right half of the page?

    Maybe the image should be in it’s own wrapper/container to achieve this, but again: demo.

    #254204
    Linda_A
    Participant

    As I am doing the changes on a live site since I don’t have a way of running a development site, working up a demo involving images is sometimes awkward, so I was simply noting that I didn’t have one done yet. To minimize disruptions, I try to rule out hopeless approaches first. However, I understand if that makes it impossible to answer — I don’t know enough about layout to judge if something is a simple yes/no answer or more complex.

    #254205
    Atelierbram
    Participant

    Fair enough. Best next thing would be linking to this live site (for us to be informed by the HTML/CSS code on what the issue really is and by doing so being able to help you).

    #254206
    Linda_A
    Participant

    I hope to be able to do either that or get a demo sorted soon(ish), just need to wrap up work on some other fixes. Thank you, though. :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.