Pregnancy training Website Mockup

The Text Column and Tall Photograph Are the Main Responsive Review Points

The block depends on the contrast between a compact left text column and a tall right-side photograph. At wider screen sizes, that relationship gives the “Pregnancy Training” heading, two supporting paragraphs, and learn-more button enough room to sit beside the image without crowding. As the available width narrows, the main review points become text wrapping, the height created by the paragraphs, and the way the image retains its visual role alongside or beneath the service copy.

The “Pregnancy Center” label and bold heading should remain visibly related, while the muted blue-gray title panel must continue to distinguish the opening content from the white background. The outlined pill-shaped button also needs enough surrounding space to remain an intentional action rather than a compressed line below dense text. The tall photograph should keep a useful crop and visual presence without forcing the text into an unnecessarily long sequence. Reviewing these relationships across screen widths helps preserve the block’s original hierarchy: topic first, service explanation next, action after the copy, and supporting exercise imagery beside the message when space permits. In a website mockup, this section is therefore a concrete responsive presentation point, not merely a static desktop arrangement.