How to Free Up Space on Your iPhone or iPad

  • georged31093
  • Leave a comment
  • June 22, 2017
  • How to Free Up Space on Your iPhone or iPad Is the storage full on your iOS device? Here’s how to figure out what’s taking up the most space so you can decide what to delete. How much space is left on your iOS device? Do you hit a wall whenever you try to update […]

    How to Free Up Space on Your iPhone or iPad

    Is the storage full on your iOS device? Here’s how to figure out what’s taking up the most space so you can decide what to delete.
    How much space is left on your iOS device? Do you hit a wall whenever you try to update your OS or download new apps? What’s the best way to move files you want to keep in order to free up space? And how can you make smart decisions about what to keep and what to delete? Follow these few simple steps, and you’ll be on your way to a less overloaded, more organized iPhone or iPad.

    1. Check your total usage

    Go to Settings > General > Storage & iCloud Usage.

    At the top, you’ll see sections for Used and Available space, which refer to the space on your iOS device. Below them, you’ll see your iCloud storage. For the purpose of this article, however, we’ll just focus on local storage.

    ADVERTISING

    You don’t need to understand these numbers deeply, and there are no hard and fast rules about how much space you need to leave free on your device. If you simply want to have enough free space so that you can take new photos and install new apps without worrying about hitting an obstacle, give yourself at least 1GB of free space (1GB=1,024MB).

    Note that when you add your available space and the used space, they won’t add up to the total size of your phone (e.g., a 16GB iPhone may appear to have only about 12.3GB total space) because it doesn’t include the space being used by the operating system.

    2. Find apps taking up the most space

    On the Storage & iCloud Usage Screen, tap Manage Storage. Here you’ll see a list of all your apps, in order of how much space they consume.

    Select any app, and a new page shows the usage into two parts: the amount of space the app itself uses (in light gray at the top) and the space used by the app’s data and documents.

    For example, my favorite podcasting app Downcast takes up 622MB total: 17.1MB for the app and 605MB for documents and data.

    Sometimes, this information helps you see that it’s not the app that takes up so much space, but rather what you store in it. In my case, the Downcast app is listed first when I go to the Manage Storage page, meaning it is the app that takes up the most space of all my apps, so I know I can make big gains by getting rid of any excess data in it. And I have some options. I could listen to the podcasts that are saved in the app and delete them afterward. Or I could change my settings in the app so that new podcasts only download to my phone when I want to play them. Or I could change the settings to only stream podcasts with a video component and never download them.

    3. Check your photo and video use

    A lot of people find that the Photos & Camera app takes up a lot more space than they realized, so let’s deal with that app directly. Tap on it and you’ll see Photo Library and My Photo Stream. Right now, just focus on Photo Library, as that’s the space being used locally on your iPhone or iPad.

    If you have more than 1GB here, you should consider copying photos and videos to another storage space so you can delete them from your iPhone and free up a lot of space.

    If you have a Google account, an easy option here is Google Photos. Download the app, sign in and navigate to Settings > Back up & sync > and toggle Back up & sync to on. Make sure Google Photos has access to Photos (Settings > Google Photos > Photos) and then, every photo you take with your iPhone will be automatically backed up to Google Photos and accessible across your devices and on the web.

    You can also offload your iPhone photos via Dropbox or any cloud-based syncing and storage service you like, such as Box, SugarSync, etc. Ideally you want the service to have a mobile upload feature in its iPhone app, as Dropbox does.

    Once iPhone photos have uploaded to your cloud service of choice — double- and triple-check that they’re there — delete them from the Photos app. Then navigate to Albums > Recently Deleted. Tap Select, and then at the bottom tap Delete All. If you skip that last step, you won’t free up any space for a month, as your iOS device hangs onto deleted photos for 30 days, just in case you change your mind about deleting them.

    Other apps that often take up a lot of space include music players, podcast players, Voice Memos and office apps. You probably want to keep the app itself, but you might be able to free up space by deleting files that are no longer relevant. To do so, open the app where they’re contained and remove them. In other words, you can’t delete them from the iPhone or iPad Settings area.

    4. Wade out of the stream

    Photo Stream is meant to be a seamless way to share photos across iOS devices. Activate it on your iPhones and iPads, and any time the devices are on the same Wi-Fi network, photos taken from one device, like your iPhone, will appear on the others, like your iPad.

    It’s a handy feature, but the feature syncs the most recent 1,000 photos, so it can eat up space. If storing your photos on one device is enough for you, turn Photo Stream off. You can do this by going to Settings > Photos & Camera > Upload to My Photo Stream and toggle it off.

    5. Target apps you don’t use

    Go back to Settings > General > Storage & iCloud Usage > Storage > Manage Storage. Scroll through the list of apps and look for apps you don’t use; it’s much easier to do this here than on your home screens, where apps are likely to be scattered across several pages and bunched into folders.

    If you find apps you don’t need or only use in specific contexts — like travel apps — consider deleting them. Any app you’ve purchased in the past is always available for you to download again at no extra charge.

    To delete apps, go to your iPhone or iPad’s home screen. Place your finger on an app you want to delete and hold (don’t press down on iPhone 6s and 7 or 3D Touch will activate). Apps will start to wiggle and a small X appears on each icon. Press the X, and confirm to delete. Press the home button to stop the wiggling.

    6. Remove unwanted music

    Multimedia, such as audio tracks and videos, takes up a lot of space. There are two ways to delete audio files and videos.

    From Settings

    Go to Settings > General > Storage & iCloud Usage > Manage Storage > Music. The next screen summarizes all the songs and albums you have stored on your phone.

    Delete tracks you don’t listen to by swiping left. You can also use the Edit button (top right) to delete multiple tracks and albums in one shot. Both actions delete all the files associated with the entry or album.

    If you want to put the music back on your device, open the Music app and go to Library. Find the song or album you want, tap it, and re-download it by tapping the cloud-arrow icon on the right.

    From within the app

    Open the Music app. Go to Library > Downloaded Music, where you’ll see music that’s stored locally and taking up space. If you want to delete an entire album, press on it and a pop-up menu will include a “Remove” option (pictured). You can do the same for specific songs within an album.

    Consider streaming

    If you want to have thousands of tracks at your disposal, use a music-streaming service like Spotify. If you’re a Premium subscriber, however, keep an eye on how much you download for offline use. Storing all those playlists on your device can quickly eat up space.

    7. Get (rid of) the message

    Unless you like to hang onto conversations for sentimental (or legal) reasons, delete all “running late” or “what do you want for dinner?” texts to free up some space. If you like to live dangerously, set texts to automatically delete. Go to Settings > Messages and choose to keep messages for 30 days or 1 year.

    8. Empty your browser’s cache

    One final smidgen of junk to wipe off your iPhone or iPad is the cache for the Safari web browser or other mobile web browsers you use. For Safari, go to Settings > Safari. Tap Clear History and Website Data.

    For Chrome on iOS, open the app, tap the three dots on the top-right corner and select History. Then tap “Clear Browsing Data” to wipe everything out or “Edit” to erase specific sites. You can also navigate to Settings > Privacy > Clear Browsing Data, which will let you delete: browsing history; cookies and site data; cached images and files; saved passwords; and autofill data — or everything at once.

    The web designer’s guide to Flexbox

  • georged31093
  • Leave a comment
  • The web designer’s guide to Flexbox Learn how to create better CSS grid systems to easily centre, align, scale and reorder elements on your web page. Have you started using the Flexible Box Layout module in your projects yet? Although the module has been around for some time, there have been two major barriers stopping […]

    The web designer’s guide to Flexbox

    Learn how to create better CSS grid systems to easily centre, align, scale and reorder elements on your web page.

    Have you started using the Flexible Box Layout module in your projects yet? Although the module has been around for some time, there have been two major barriers stopping frontend developers from using it in their projects.

    First, until recently the spec was in flux and there wasn’t great support for it. Today, all modern browsers support Flexbox. The second barrier is that it is pretty tough to grasp the concept of Flexbox. While it is super-powerful, there are a lot of moving parts and it can be difficult to learn. But the ability to arrange page elements, and have them behave in a predictable way, across multiple screen sizes, is well worth the effort.

    Want to get started with flexbox? Read on!

    In this article, I will get you up and running with the fundamental concepts behind flexbox. Understanding these core concepts will open up a whole world of extremely flexible, easy to create layouts (especially for responsive web design).

    Next-generation design

    Flexbox is a next-generation tool to help you create layouts with CSS; whether you want to lay out a section of your website or display a grid of media elements. It enables you to easily align, centre, justify, scale and reorder elements on your page, without having to resort to nasty CSS hacks or fragile JavaScript dependencies.

    Flexbox can replace floats, positioning tricks, inline-block layouts and even – shudder – table display layouts. If you have ever pulled your hair out wondering why some seemingly simple layouts were difficult or even impossible in CSS, you are going to love Flexbox.

    Flex elements

    The magic of Flexbox is in the relationship between the parent ‘flex container’ and the children ‘flex items’. In order to take full control of Flexbox, you must put aside any previous ideas of floats, positioning and clearing. This is a totally new way of laying out your page.

    Setting display:flex; on a parent element turns it into a flex container, and all of its immediate children will be turned into flex items. Once you have your markup set up, you can use one of the many available flex properties to create a layout.

    Note: any of the HTML elements can be a flex container or flex item. Any :before and :after pseudo-elements you have on your flex container will be treated as children, and therefore first-class flex items.

    Rows and columns

    Fig 1  The default flex direction set to row

    The default flex-direction set to row

    There are two axes in Flexbox that control how the flex items on the page are laid out: the main axis and the cross axis. By default, Flexbox is set up so the main axis goes from left-to-right (or the opposite, for languages that read right-to-left) and the cross axis flows top-to-bottom (shown above). Before you go memorising that, note that this can – and will – all change with the flex-direction property.

    Fig 2  The main axis flipped with flex direction row reverse

    The main axis flipped with flex-direction:row-reverse;

    By default, Flexbox is set up with flex-direction: row; which means the items flow on the main axis from left-to-right, in a row. We can switch the main axis so it flows from right-to-left by using flex-direction:row-reverse (as shown above).

    Fig 3  The main axis switched from horizontal to vertical with flex direction column

    The main axis switched from horizontal to vertical with flex-direction:column;

    To switch both the main axis and the cross axis, we change the layout to flex-direction:column;. This will alter the main axis and flex item flow from left-to-right to top-to-bottom, in a column (above). We can also start from the bottom and move up by flipping the main axis with flex-direction:column-reverse.

    Centring items

    One of the best things about Flexbox is that it allows you to align your content in any way you please – even vertical centring is an absolute breeze! There is often confusion surrounding Flexbox alignment, because there are three different properties that we use to modify the alignment of our flex items.

    One reason for this is that these properties align the items along the main and the cross axis. So instead of asking, ‘how do I centre something vertically or horizontally?’ you must first establish which direction your axes are pointed, and then figure out which CSS property to use to properly align and centre your flex items on them.

    In the next few examples, I’ll be attempting to perfectly centre my items. However, you should know that each of these properties has a number of alignment options. For a full list, I recommend keeping this CSS-Tricks flexbox reference handy.

    The cross axis

    Fig 4  align items center  will centre our items along the cross axis  which in our case is top to bottom

    align-items:center; will centre our items along the cross axis, which in our case is top-to-bottom
    Advertisement

    By default, flex items stretch across the entire flex container along the cross axis. If we want to centre items along the cross axis, we can use the align-items property on our flex container and set it to center (shown above).

    In addition to stretch and center, we can also use flex-start and flex-end to anchor the items at the top and bottom respectively. Finally, we have baseline, which will align the items along the bottom (or baseline) of your text. This is extremely helpful when you are trying to align items with varying font sizes.

    Justifying along the main axis

    Fig 5  Justify content center  will centre our items along the main axis

    Justify-content:center; will centre our items along the main axis

    Now we have the centring working along the cross axis – top to bottom in our case – we need to get centring working across the main axis. For this, we use justify-content:center (shown above).

    Just like with align-items, we can also use flex-start or flex-end, as well as space-between and space-around, which will evenly divvy up the remaining space between the elements. This is super-useful when working with grid layouts that don’t add up to 100 per cent of the margin and widths.

    Just remember, if we switch from the default flex-direction:row; to flex-direction:column;, the main axis can change from left-to-right to top-to-bottom. When we switch to column, align-items becomes the horizontal alignment while justify-content becomes the vertical alignment.

    Aligning multiple lines

    While align-items and justify-content work great when you have a single row or column of content, things get a little trickier when you’re dealing with multiple lines of content as a result of using flex-wrap:wrap; on the flex container.

    align-content works just like justify-content, but kicks in when we have multiple lines of content. By applying align-content:center; we can ensure that the lines will anchor in the middle of the cross axis and centre their elements from there.

    Just like with justify-content, we can also use flex-start, flex-end, space-between and space-around. However, this time they refer to the space in-between the rows or columns of content, and not the flex items themselves.

    Now, with just four lines of CSS, we have a bulletproof way of vertically and horizontally centring all direct children of a flex container.

    .container {
    align-items: center;
    justify-content:center;
    align-content:center;
    flex-wrap:wrap;
    }

    Filling the space

    So far, everything we have learned about alignment has to do with the flex container and how it aligns its children. With align-self it is possible to override the align-items property set on the flex container by individually setting align-self to flex-start, flex-end, center, baseline or stretch.

    Another often misunderstood part of flexbox is how to work with grow, shrink and basis values. It’s helpful to once again throw away any ideas of pixel-perfect grids and embrace that flexbox is, well, flexible.

    Each flex item can be assigned a flex-grow, flex-shrink and a flex-basis value. With these values we can indicate our ideal sizes, and then specify how the items should act in situations where there is extra, or not enough, space. From there, the items will just figure it out for themselves.

    I like to think of these properties as:

    • flex-grow: How do I act when there is extra space available? How will the flex items divvy up the remaining space?
    • flex-shrink: How do I act when there isn’t enough room for all the flex items? Rather than overflow the container, who will give up part of themselves to make everything fit?
    • flex-basis: Instead of setting a definite width or a height on your element, ideally what width (as a row) or height (as a column) will it be?

    Note that while it is possible to specify these properties individually, you will almost always be using the flex shorthand to specify the grow, shrink and basis values all at once. Check the videos at Flexbox.io for a more detailed description of the flex shorthand property.

    Growing and shrinking

    The idea is that we can set our ideal width or height with the basis value, and then when there is extra space available for the flex items, the flex-grow property will decide how much extra to take up. Similarly, when there is not enough space available, the shrink property will decide how much each element will give up (or ‘shrink’).

    Advertisement

    The flex-grow and flex-shrink properties are unitless, proportional values. They describe how much – in relation to all the other flex items – the item will grow or shrink.

    Let’s say we have two flex items: video and credits. We will set the video to flex:1 1 700px; and the credits to flex:3 3 300px;. Now the parent of both of these items is the flex container, and when it is 1000px wide things work out perfectly: the video takes up its 700px and the credits take up the other 300px.

    What happens when the flex container is 1500px wide? We have an extra 500px to work with, so where does that go? That is where flex-grow kicks in. The video is set to 1 while credits is set to 3. That means of all the extra room, credits will take three times (375px) the amount of space the video will get (125px).

    Similarity, what happens when our flex container is smaller than 1000px? Let’s say it’s 900px: how do the video and the credits act then? Unlike with floats, we don’t just break onto a new line, or scale them down with percentages. Instead, we use the flex-shrink property.

    Since the credits have a flex-shrink of 3 and the video has a flex-shrink of 1, this means the credits will give up three times as much space as the video. So since we need to shave off 100px from somewhere, the credits will give up 75px, while the video container will only give up 25px.

    Unknown navigation size

    Let’s look at some common use cases of flexbox. If you have ever worked with a navigation in a CMS like WordPress, you’ll know that it can be hard to predict how many elements will be included in your navigation.

    Evenly distributing the space between all the elements requires JavaScript. For example if you have three elements, each one should be take up 33.33 per cent of the width, while with five elements each one should take up 20 per cent.

    Let’s take a look at this commonly seen code as an example:

    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

    With flexbox, we can easily create this navigation, and even make it responsive, all with just a few lines of CSS. All we need to do is to set our navigation container (usually an unordered list of items) to display:flex, and then each of the flex items to flex:1 or flex-grow:1;.

    This will stretch the list items horizontally and fit them perfectly into the available width. The reason this works so nicely is that we set the flex items to grow 1, which means that when there is extra space left over, it will be divvied up evenly between all the items.

    For more on this, and to learn how to size your navigation elements differently, make sure to watch the responsive navigation tutorial available on Flexbox.io.

    Equal-height columns

    Fig 6  align items center  will centre our items along the cross axis  which  in our case is top to bottom

    align-items:center; will centre our items along the cross axis, which in our case is top-to-bottom

    Have you ever wished that CSS had a height:as-high-as-the-highest-sibling property? We have all been there – we have three columns of content, all of which are different sizes (above). The content is dynamic and the site is responsive, so setting a fixed height on each one is out of the question, and a JavaScript fix isn’t ideal.

    Earlier we learned that the default of align-items is stretch. This means the flex items will stretch to fit the parent flex container. And how is the height of the flex container defined? Almost always by the height of the tallest content box.

    Let’s take the following markup, for example. If we render this out with floats and percentage widths, we will see the container is sized by the middle element and the other two are only as high as they need to be.

    <div class="container">
    <div class="box">
    <p>I'm short</p>
    </div>
    <div class="box">
    <p>I'm a pretty tall box that is the biggest</p>
    </div>
    <div class="box">
    <p>I'm a medium sized box</p>
    </div>
    </div>

    Fig 7  With flexbox  boxes stretch to fit the flex container and all become equal height

    With flexbox, boxes stretch to fit the flex container and all become equal height

    Now, if we simply use display:flex; on the flex container, and set each element to be 33.33 per cent with the flex-basis property, immediately the flex items stretch across the entire cross axis, regardless of how much content is in them (see image above).

    .container {
    display:flex;
    }
    
    .box {
    flex: 1 1 33.33%;
    }

    Conclusion

    I hope by now you see the value in learning how to use the Flexible Box module. While it won’t solve every issue you have with CSS, it’s an important tool every designer and developer should know, and have in their arsenal.

    It has been a while since we have had anything this large come to CSS, and I’d argue it’s one of the tougher parts of CSS to learn. Just remember that you pushed though learning floats, so Flexbox is totally something you can master!

    Must-have resources

    What the Flexbox?!

    ‘What the Flexbox?!’ is a free 20-video training course I’ve created. In the first half of the course, each video introduces a new aspect of Flexbox. I’ve kept these nice and short, so you can reference them later when you need to brush up on a particular part. The second half of the course dives into a real-world example, detailing how we can use Flexbox to quickly and easily solve many of the common layout problems we face.

    A complete guide to Flexbox

    Once you get the hang of Flexbox, you can put the training materials aside. However, it’s helpful to keep a visual reference handy. This fantastic resource from Chris Coyier breaks down each of the 13 different Flexbox properties, showing which apply to the flex container and which apply directly to the flex items.

    Flexbugs

    Flexbox is not without fault, and like anything, there are a handful of cross-browser bugs and workarounds you should know about. Flexbugs outlines a range of known Flexbox bugs as well as offering possible fixes and workarounds.

    Flexbox in 5 minutes

    For a quick’n’easy introduction to the fundamentals of Flexbox, check out ‘Flexbox in 5 minutes’. It’s a step-by-step wizard that will guide you through how to create, style and change your first Flexbox-based layout.