Un do Viewport

HTML & CSS
21

actualczuzrzes.zcozm w/o the Zs.

Awesome! This page is mobile-friendly.

:smile:

22

Yeah google mobile says it’s awesome, kinda like this cat

2 Likes
23

I tried and tried but I just can’t get the header image to show in any way. One site says try {body {width:device-width}}, another says to put the image in a div and set the image size to 100% but I couldn’t get these to work.

Chris

24

Please post a link to your web page or somehow show us your code.

25

actualczuzrzes.zcozm w/o the Zs.

26

Can you explain what you mean as the header seems to be showing?

27

I thought google simulations would be pretty good. Maybe not. The header image, painted grapes, pairs, doesn’t show on Gg. See

https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Factualcures.com%2F

Thanks

28

It shows for me on a real iphone4 and on the iphone 6 on the mac emulator. I’m guessing the screenshot is taken before the image has loaded.

29

You’re right. I finally found a good mobile emulator, http://quirktools.com/screenfly/

Thanks

30

Unfortunately, code for removal of the left and right columns for mobile is removing the columns for desktop also once the browser is narrowed not much (my guess to less than 972 pixels). I really want those columns for desktop. Any idea for a fix?

Thanks,

Chris

31

… I think what I need is a minimum width that applies to desktop but not to mobile.

32

Hi,

Not sure what you mean as the columns are removed at around 762px which is probably about right as the middle is very squashed by then. Above 762px the columns display fine.

You may have to explain what you are seeing exactly if that is not the case for you.
It is quite easy to change the media query:

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

}

Just change to a value smaller than 762px however I think that will make your center content un-readable.

33

Yeah it’s my wrong guess. I have this line of code that has 972px in it: Content{max-width:972px;position:relative;width:100%;overflow:hidden;background-color:#3F3F7F;margin:30px auto 0;padding:10px 0}

and there’s 762px in:
@media screen and (max-width:762px)

The desktop version is fine at full browser width and then loses the columns when the browser (FF39) is reduced to just below 3/4 browser width.

Thanks Paul

34

I’ve tested with Firefox 40, and the columns disappear when the browser width is about 762px, which is exactly what you’d expect from your media query.

35

What change could I make so the media query applies to mobile but not desktop?

Thanks

36

The media query applies to any device once the width reaches a certain point. A design which is too cramped for a mobile device at 762px will also be too cramped for a desktop device at the same width.

As @PaulOB says, you can reduce the width at which your media query kicks in, but that is likely to cause problems on all devices at narrower widths.

37

What is the value of the media query if it applies to all devices. Is it true there’s no code to have what’s wanted for certain types of devices and not others?

38

Why would you want to try and style individual devices? You do realize there are thousands of devices, and thousands of media sizes, right?

You want to go down a load and terrible road. I highly recommend you stop this thinking :slight_smile: .

39

But there aren’t thousand of screen dimensions.
There’s gotta be a way for columns all the time for desktop screen (which are getting larger all the time) and no coulmns for devices below say 762px.

40

Maybe true - BUT - there are thousands (likely tens or even hundreds of thousands) of viewport dimensions.
Don’t assume a visitor will have their viewport maximized to fill the available monitor screen size.