Fri, 2017-08-25 10:30
Hi
I am build a site with my son. It can be found here:
We want the flex box to change to a column layout on mobile. But it doesn't do this.
We are using the media query below.
@media (max-width:480px) {
.box{
flex-direction: column;
}
}
Any idea what we are doing wrong?
Thanks
Fri, 2017-08-25 17:14
#1
Cannot replicate
My tests show that the page changes to a single column at some point less than 800px width and greater than or equal to 600px width.
Did you find your fix?
gary
Sun, 2017-08-27 14:55
#2
Hi, I find it works in
Hi,
I find it works in browser on desktop. But on my iPhone when viewed it displays as 2 columns. I still cant get it to display as 1 column on a mobile device.
Regards
Sun, 2017-08-27 18:22
#3
Not tested
Add this to your head:
<meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport">
I no longer have any Apple products to test on. It is my understanding that i(anything) try to "think" for you and do a bad job of it. Adding the meta element should make them work correctly. (I hope)
gary
Mon, 2017-08-28 13:26
#4
Hi Gary That worked, thank
Hi Gary
That worked, thank you very much. I have never seen that code before and I have been all over google looking for how to get this to work. Ill save that code as it will no doubt be very useful in the future.
Thanks for taking the time to help us.
Kind Regards
Mon, 2017-08-28 18:11
#5
Always use it
I'm happy it worked for you. Apple browsers are the new IE. Not as bad as IE was, but just as quixotic (used in its pejorative sense).
Make that meta element a part of all your pages. Put it in your basic html template. It won't hurt anything if not needed, and will solve myriad issues in responsive documents.
For example, my boilerplate (stuff that appear in every page) template:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> </title> </head> <body> </body> </html>
cheers,
gary
Tue, 2017-08-29 02:00
#6
Thanks
I definitely will, great advice.
Thanks a lot.