Newbie with questions regarding dimensions for iPads and iPhones

Tagged: , ,

Author Posts

swmri August 21, 2017 at 5:24 am

I am loving this plug-in after using it for just a few hours.

I do have an issue with my devices when viewing my changes.

How do I set up the dimensions outside of the simple tabs on top, so that a change occurs on my iPhone 7 Plus, or my iPad Pro?

I can find the dimensions elsewhere, but am not sure if they are doubled, and thus to be halved in MT.

The gear in the top left doesn’t show an iPad Pro or an iPhone 7 Plus as options.

Finally, how do I convince an element to show up and then change at a specific screen dimension? Do I just manually move the viewport to the correct width, and then create a new parameter for the selection? Do I do this with the ‘All Devices’ tab selected at the top? How do I convince a parameter to be one value on one side of a dimension, and a different value with a smaller screen size?

I hope these are not too elementary questions to ask. I have been trying for a few hours to figure this out.

Thanks!

Sebastian August 21, 2017 at 1:19 pm

Hey,

The responsive tabs along the top of the interface are customisable via the “Edit media queries” icon to the very left of them. And you may wish the create some additional tabs beyond those suggested by default. However, it’s considered better practice, and much less work, to apply responsive styles that target a range of screen sizes, rather than trying to design for individual devices like iPhone 7.

If you click on some of the default responsive tabs you will notice that the site preview changes width. But you may also notice that the shading on the ruler changes. The darker shading shows the scope of the media query – the screen size range it will take affect on. The trick is to apply styles that will work across a range of screen sizes, rather than say only at 480px, or 768px wide. For a layout to be flexible enough not to break across a range of screen sizes, it’s need to be fluid.

I’ve written a responsive tutorial which explains how to make and work with fluid layouts. It’s in need of updating, because it uses an older version of Microthemer. But it may help you understand the main concepts if you can follow along. I will update it in the near future, and include video walk-throughs.

The devices you found in the corner of the rulers are just for previewing your design on popular devices. Only styles entered via the tabs at the top will be specific to a given screen size. I have now added iPhone 7 and iPad pro to the preview list however (just update MT to version 5.0.8.1). Thanks for raising that omission. Manually dragging the viewport to a certain width is just for previewing too.

The getting started video shows how to apply different styles for different screen sizes (around the 5 minute mark): https://youtu.be/NZFbc-KuMPk?t=4m57s

You’ve raised good questions. I hope my answers make sense. Please let me know if you need further clarification.

Cheers!
Sebastian

swmri August 22, 2017 at 1:24 am

Thanks very much for taking the time to respond in detail. I would like to ask a few follow-on questions, if I might:

I understand fully about creating for a range rather than a specific device. How can I tell the website to present specific css changes below a specific size?

Also, why are there gaps, such as ‘Desktop and Tablet’ going up to max-width 979px, but ‘Large Desktop’ starting at min-width 1200px?

Finally, I tried to read some of the material, but its over my head without some studying, and my object is to keep things simple (that’s why I like your plug-in!). What is the difference between using min-width and max-width? I think I understand that min-width helps things load faster on smaller devices, but I am not sure how to prioritize this using MT, or if it is important for someone like myself who is not a web developer.

If you click on some of the default responsive tabs you will notice that the site preview changes width. But you may also notice that the shading on the ruler changes. The darker shading shows the scope of the media query – the screen size range it will take affect on. The trick is to apply styles that will work across a range of screen sizes, rather than say only at 480px, or 768px wide. For a layout to be flexible enough not to break across a range of screen sizes, it’s need to be fluid.

I did see this range while using the plug-in, but again, not sure how to figure out the gaps, or how to create a css change at one point and below.

I’ve written a responsive tutorial which explains how to make and work with fluid layouts. It’s in need of updating, because it uses an older version of Microthemer. But it may help you understand the main concepts if you can follow along. I will update it in the near future, and include video walk-throughs.

Thanks, it is laid out nicely, but I am trying to keep this simple, at least as much as I can while still accomplishing my goals.

I did see and understand the intro video section on using the tabs. Thanks, that part makes sense for the presets. How do I create a new preset for iPhone 6 or 7 Plus, or do I need to?

And could I please ask for clarification on ‘preview?’ Am I correct in assuming that dragging the viewport/size of the preview in any tab to a specific size is a ‘preview,’ but that changing css at any point like this doesn’t ‘take?’ My further assumption is that a css change is only effected when using a tab with a preset.

So after all that, please forgive me for the length of my questions, it boils down to this:

1. How do I select a breakpoint below which a css change is effected?
2. Is this only accomplished through a tab, and not by dragging the area to a different size?
3. Do I need a tab or preset for each device, or just create using the tabs that are already there, and then just check a preview to make sure it works?

Thanks!

Sebastian August 23, 2017 at 5:37 pm

Hey,

In answer to your questions:

1. How do I select a breakpoint below which a css change is effected?
You must use the responsive tabs. These are editable via the “Edit media queries” icon to the left of them. So you are free to change the min/max-width values to suit your needs. Or create additional ones. The default Microthemer breakpoints are those used by the popular Bootstrap CSS framework. And so will be familiar to many developers. But they are just there as a starting point. Your site may require different breakpoints.

2. Is this only accomplished through a tab, and not by dragging the area to a different size?
Yes, you can only set screen specific styles via the tabs. Dragging is purely for previewing how things look at different screen sizes.

3. Do I need a tab or preset for each device, or just create using the tabs that are already there, and then just check a preview to make sure it works?
You don’t need a tab for each device. Just use the tabs that are already there or customize your own, as per my answer to question 1.

—

In answer to your question about the gaps. My guess is that when bootstrap decided on some default media queries, they took into account the fact that non-responsive sites generally looked OK in the range of 960px – 1200px. And so special styles are only likely to be needed for screens larger than 1200px.

I hope that clears things up a bit!

Cheers,
Sebastian

You must login or register to reply to this topic.