Skip to main content
Participant
February 26, 2026
Answered

Advice for paragraph and photo content on websites

  • February 26, 2026
  • 4 replies
  • 146 views

Hello,

 

I’m currently working on a website that’s meant to be article based- with paragraph content and corresponding pictures taking up most of the site. I’m having trouble nailing down the layout and was wondering if anyone had any advice/resources they could share? I’m making my site responsive with media queries and flex displays, what I’m most interested in is how to get the images to sit in certain spots as they size down, and how to make them flow with the text better if that makes sense.

 

I’d appreciate any advice!

    Correct answer Nancy OShea

    The sky is the limit with layouts.

    For inspiration, look at Templates built for magazine or news websites.

    https://themeforest.net/search/bootstrap%20magazine?srsltid=AfmBOooLwxNV41rUttEOYGiAqlHilrF_tbzeqk7vdw3h-0PFoQC6ZvTK

     

    4 replies

    johnpaul1234
    Participant
    March 14, 2026

    A clean way to handle this is to treat each article section as a content block with text and image wrapped together, then control the flow by changing the flex direction at smaller breakpoints.
    For better image placement, set consistent aspect ratios, use object-fit: cover, and avoid hard-coded heights unless they are necessary for the design.
    You can also use CSS Grid for sections where the image needs to lock into a specific visual position while the paragraph content stays readable.
    I’ve found that studying content-heavy layouts through tools like a DPI analyzer can also help you judge image clarity and visual balance across different screen sizes.
    Focus first on readability and spacing, because when the text rhythm feels right, the images usually start fitting more naturally too.

    Community Expert
    March 9, 2026

    Hello ​@patricia_2416 ,

    What you describe actually comes up quite often when building article-based layouts. The difficulty is less about responsiveness itself, and more about how images live inside the content flow.

    When an article contains paragraphs and images that should stay visually connected, it usually helps to think of the page as a reading flow first, and only then as a layout problem.

    A few common approaches can help.

    One is to place images inside <figure> elements directly in the article flow. The text then wraps naturally around them or continues below them, depending on the layout rules you define.

    Another approach is to use CSS Grid for the article container. Grid can make it easier to control where images sit relative to the text as the screen becomes smaller. Flexbox is great for small UI components, but for editorial layouts Grid often gives you more predictable control.

    It also helps to keep images flexible by using something like:

     

    img {
    max-width: 100%;
    height: auto;
    }


    That way they scale naturally with the container.

    In many cases the key is not to force images into fixed "positions", but to let them move with the reading structure of the article as the screen changes.

    If you’d like, feel free to share a small snippet of the HTML/CSS you have so far. It’s usually easier to suggest something specific once we see the structure you’re working with.

    Community Expert
    February 27, 2026

    If it’s an article based website you could look to a CMS like Wordpress with themes or use builders in the CMS to accomplish your goals. Is this something you have considered?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    February 27, 2026

    The sky is the limit with layouts.

    For inspiration, look at Templates built for magazine or news websites.

    https://themeforest.net/search/bootstrap%20magazine?srsltid=AfmBOooLwxNV41rUttEOYGiAqlHilrF_tbzeqk7vdw3h-0PFoQC6ZvTK

     

    Nancy O'Shea— Product User & Community Expert