6 replies [Last post]
diggywiggle
diggywiggle's picture
Offline
newbie
Last seen: 3 weeks 2 days ago
Timezone: GMT+9
Joined: 2017-08-25
Posts: 4
Points: 5

Hi

I am build a site with my son. It can be found here:

http://myokotech.com/leon/

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9644
Points: 3712

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diggywiggle
diggywiggle's picture
Offline
newbie
Last seen: 3 weeks 2 days ago
Timezone: GMT+9
Joined: 2017-08-25
Posts: 4
Points: 5

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9644
Points: 3712

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diggywiggle
diggywiggle's picture
Offline
newbie
Last seen: 3 weeks 2 days ago
Timezone: GMT+9
Joined: 2017-08-25
Posts: 4
Points: 5

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 44 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9644
Points: 3712

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diggywiggle
diggywiggle's picture
Offline
newbie
Last seen: 3 weeks 2 days ago
Timezone: GMT+9
Joined: 2017-08-25
Posts: 4
Points: 5

Thanks

I definitely will, great advice.

Thanks a lot.