looking for advice on mobile friendly layout for my website

[james438]

molendijk, I didn't have as much time to implement your code over the weekend. It is independence day over here which unfortunately means endless fireworks. I mean fireworks are great and celebrating Independence Day is great too, but in my neighborhood that means 24 hours of day of loud booms for several days (so far about four) with a dog you are trying to comfort. Sigh

I was a bit confused at first because the banner was already set at 70% then I looked at it in Firefox and saw what you meant. Firefox seems to treat min-width differently than other browsers. I didn't look into it too much; just removed min-width for now. I don't think I want to make the banner more narrow in the mobile version so much as I want to shrink it or just replace it.

Beverlyh, I like your suggestion of increasing the width of the banner to the width of the screen or close to it in the mobile version. The problem is that the title becomes too cropped, so I think it needs to be resized somehow instead.

[Beverleyh]

I think it needs to be resized somehow instead

ta-dah!!!!! http://fofwebdesign.co.uk/template/_...nime-views.htm

As a starting point at least - shrink your browser window to see the effects - both exhibit different behaviours so play around and see if you can work with them.

[james438]

I like them both! It is hard to decide between the two, but I think I like the second better. I'm not sure why, but I am having trouble getting them to render correctly when I integrate them into my demo page.

[Beverleyh]

I am having trouble getting them to render correctly when I integrate them into my demo page

Looking at your CSS, you have the following rules defined, which you later need to nullify in your 899px media query;

.banner { height:192px; margin-left:17%; width: 66%; ...

So, you'd auto the width and height and zero the margin-left (returning them to their default values), and also add the :after pseudo element CSS;

@media screen and (max-width: 899px) {

	.banner { 
		width: auto; 
		height: auto; 
		margin-left: 0;
	}
	.banner:after {
		content: " ";
		display: block; 
		width: 100%; 
		padding-top: 33.333%; /* 3:1 final ratio */
	}

...

}

This part can be deleted;

.banner              {content:" "; display:block; width:100%; padding-top:0;width:100px;/* 3:1 ratio */
margin-left:0%;
}

That's a mish-mash of stuff from .banner and the .banner:after pseudo element

[james438]

Works great! I'm enjoying the new functionality of my banner

The after pseudo element is new to me. How does it operate in this example? What does padding-top: 33.333%; do here?

molendijk, I misread my code earlier. The banner was set to 66%, not 70%.

I'm going to work on some smaller layout issues with the middle content next.

[Beverleyh]

The padding-top is giving the div height. If you think that the div is an empty element (there's nothing inside) so it would naturally want to collapse in on itself to zero. Except we don't want it to do that because of the background-image, so we need to give it height. The obvious thought would be to set a height property:value; pairing, which is easy in a fixed layout, but not so much in responsive design. You can't do it with % (doesn't work) and if you set it in px, the height is fixed and wouldnt resize nice and proportionally along with the width. Now the funny thing is that internal padding scales proportionally to width - even top and bottom padding, which seems strange because you'd think it would more likely scale with the height of an element, but it doesn't. Weird, but that's another story. So if you set a vertical padding on the element (either directly or as a pseudo element) you're indirectly giving it a relative height. And 33.33% is the ratio of the final image - you can change that for different sizing effects.

Depending on the circumstances, you can also set vertical padding on the div with the background-image itself. I used a pseudo element for some reason that currently is illuding me and I can't test the difference as I'm on iPhone. Most likely I dismissed it due to scaling behaviour, or maybe I wanted to present CSS methods that more closely related to each other in my blog entry http://www.dynamicdrive.com/forums/e...ponsive-Design Not sure. I'll have to double check in the morning.

There is another relative unit to play with too - you can set the height of the div using vw units, but the scaling with those is a bit janky (seem to scale on a steeper path than what would be desirable).

[james438]

Interesting. Thanks for the explanation

I use the Opera a great deal. One cool thing that Opera can do is when you inspect the element on a page there is a small icon in the top left menu that will allow you to select the device you want to use to view the page. For example, I chose iPhone 5 so that I can see what the page or website would look like if I had an iPhone 5. There are several others that I can choose from.

[james438]

I have updated my main page which was the most difficult and important page. I am now moving on to the rest of the site.

Thanks for all of your help molendijk and Beverlyh

[james438]

Is display:table-cell; the best thing to use here for a mobile friendly website? I'm more used to using floats, but I can learn to use display:table-cell; if that is what I need. In particular I am looking at article stubs that I have such as

http://www.animeviews.com/test2.php?ID=286

where the article div expands to the height of the right side div as opposed to collapsing to the height of the content within.

Is mobile friendly the correct terminology or responsive website better?

[molendijk]

In my experience, the easiest way to make grid systems is a combination of table-cell and min-width for the columns, where the percent value for min-width equals 100/number-of-columns and where table-cell becomes block as soon as the screen gets too narrow. Here's an example (view source).
I guess 'responsive' and 'mobile friendly' mean approx. the same here, but see http://www.atomic74.com/click/respon...the-difference.