Responsive Layout for About Us Page

Hello everyone and thanks for your help in advance. This probably seems like a very basic question, but I am trying to develop a very basic About Us page where on a full size screen, there is a picture of the person with a bio next to it, however, that resizes for mobile. I realize it can probably be done with a couple of div tabs, but my mobile efforts seem to be limited to stacking the photo above or below the bio, which seems somewhat basic and lame. But I’m not sure what a better option would be, Any help would be appreciated.

Hi there kmcnet,

can you give us a link to, or the HTML and CSS for the page?

coothead

The first thing to do is to decide exactly the layout you wan to see on varying screen sizes.
Only then can you decide how to achieve that.

It would be a fairly standard thing to have the image floated to one side. I could be constrained to a maximum percentage of container width. But at some point you probably will want to stack it, or the image gets very small and text to the side too cramped.
The good news is it’s not that difficult, once you know how.

Page under development by amateur (me)’

Can you add the photo, please?

http://kidsmedicalcare.com/About/index2

looks horrible on mobile. Not sure what to do with CSS.

You could float the images left at smaller widths, with a small amount of padding on the right and bottom edges, which would allow the text to wrap around the images. At the narrowest widths, I think having the image above the text is the only sensible way to go.

2 Likes

Yes, at the breakpoint where the text turns to black, I would lose the table layout and float the images. Change the width: 25% to about max-width: 40% so they are not too big or small.
Then on the smallest screens another break point to lose the floats and stack the image/text blocks.
It will want a couple of other tweaks, but that’s a start.

1 Like

Just above </style add:

		@media screen and (max-width:3000px) {
	/* Big Styles */
}
	@media screen and (max-width:900px) {
	/* Small Styles */
	.providername {
        display: block;
		clear: left;
		float: left;
		margin: 1em;
	}
	.practitionerleft {
        display: block;
		clear: left;
		float: left;
		margin: 1em;
        width: 100%;
        max-width:267px;
    }
	
    .practitionerright {
        width: 75%;
        display: block;
    }
}
	@media screen and (max-width:640px) {
	/* Tiny Styles */
}

… then squeeze the browser.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.