Coding Coding DoHTML Templates for Mobile

[Uaithne 543]

I'm not much of a coder, to be honest, but I know just enough to get me in trouble. 😉

 

Whenever I use a template - mine or someone else's - I run into a problem in which it's too wide for mobile viewing and my phone won't scroll sideways to accommodate the template. I have one of my templates set to a fixed width intentionally so it looks good on the  computer, and I'm sure that another template  I'm also using that's not mine is in the same boat. I don't want to make things fluid to fit screens because then it's undesirable when viewing on the computer. What have you guys done to amend this?

 

Also, do you have any coding tips for making sure things fit on both mobile and computers? I used to make jcink and invisionfree skins so long ago when mobile wasn't a thing; I'm a bit rusty.

[Morrigan 1,826]

Lots of things can do this. I would recommend a media break that allows it to re-size when it gets on a phone size.

 

Add this to your templates CSS:

@media screen and (max-width: 767px) {
	.YOURFIXEDWIDTHCLASS {
		max-width: 100%;
	}
}

This will mean that only on phones will it make the width fluid. I would need to see the actual template code to better help but this is the thing I would do. If you have images in there that equal the fixed width you would have to add more code and I can help with that too if you do.

[Uaithne 543]

Thanks, @Morrigan.  I had some time to sit down and play with this.  What I found is that the above didn't work (I was probably coding it wrong somehow) but changing the "width" to "max-width" in all of my template codes did the trick.  It looks good on both my computer and my phone.  Hopefully it still looks good on other people's computers, too.

[Morrigan 1,826]

That'll work too. And I may have described it wrong.

[featherstone 69]

If you have a max-width that is fixed and larger than your phone, having a fluid width will not help. So in the mobile css I'd put both a fluid width and either a much smaller max-width, or no max width at all. If your template is made of various components, check that none of them has a fixed width, too. Then personally I don't like fixed widths even on desktop, but YMMW.

[Uaithne 543]

How do you mean, @featherstone?

 

I used the max-width property in my CSS, and then when I checked it from my phone, it all looked good.  Is there something else I should add?

[featherstone 69]

Well, if it looks fine I guess it's okay then.

 

Just out of curiosity, may I see the css you're talking about? Max width in itself is something you add to a fluid width, in order to look good and not too huge on bigger screens. But, well, whatever works. 

[Morrigan 1,826]

That's what they were going for @featherstone so she accomplished what she needed.