Mobile Responsive Editing 101 (+ 5 Mobile Editing Mistakes and How to Fix Them)
Did you know that mobile devices currently account for more than half of all website traffic?
If you think about it, that's no surprise.
People browse the internet on their phones while waiting in line at the grocery store, eating dinner, and even while driving (please drive safely, folks).
You might be reading this very article on your mobile device right now!
With so many mobile users, it has become increasingly important to ensure that your website looks great on all devices — desktop, tablet, and mobile.
Responsive Editing the Easy Way
Let's be real for a second. Not everyone enjoys tinkering with web pages all day. The very reason why many of our customers use Thrive Architect and Thrive Theme Builder is that our tools make creating websites super easy. In fact, you can build an entire website in only a few hours.
Having to make your website mobile responsive throws a huge wrench in that plan, doesn't it?
Not to worry! One of the coolest features about Thrive Architect and Thrive Theme Builder is that our templates are mobile responsive right out of the box. So, if taking the time to make things mobile responsive doesn't sound appealing to you, simply stick to using the templates that come with our products:
- All theme templates that come with Thrive Theme Builder are mobile responsive — including headers, footers, and sidebars.
- All page and content blocks that come with Thrive Architect are mobile responsive.
- All pre-built landing pages that come with Thrive Architect are mobile responsive.
As long as you do not change the layout or spacing when customizing the elements mentioned above, the tablet and mobile versions should already look gorgeous — no additional tweaking necessary!
But let's say that you'd like to build a custom-designed page or section. Besides reading our previous article about Mobile Landing Page Best Practices, what else do you need to know in order to make your designs responsive?
Let's start with the basics.
Mobile Responsive Basics
Mobile responsiveness is determined by a website’s Cascading Style Sheet (CSS) file. This file contains specific instructions for what to display when the website is viewed on a screen of a specific size.
This means that in order to effectively build a mobile responsive website, you need to be familiar with some basic CSS concepts. But don’t worry — you don’t need to touch any code in order to use them. All your mobile responsive designs can be done from the Thrive visual editor.
Absolute vs. Relative Units
One of the most important concepts in responsive design is the difference between absolute and relative units.
Let’s take a look at how choosing an absolute unit or a relative unit can affect the layout of your page.
Many of the sizing options available in the Thrive visual editor allow you to choose a unit of measurement. For example, the Layout & Position tab in the left sidebar gives you the option to choose between PX (pixels), EM (Em), or % (percent).
Using pixels to determine the margins around an element will result in a fixed margin around the element regardless of the screen size.
Using percentage to determine the margins around an element means that the margins will scale proportionally. They will be thinner on smaller screens, and thicker on larger screens.
In the example below, we’ve set up two content boxes with margins that look more or less the same in the desktop editing mode. However, when we switch to mobile editing mode, it’s easy to see how our unit choice has affected the design.
The margins that use pixels stayed the same on desktop and mobile; the margins that use percent scaled relative to the screen size.
When choosing between absolute and relative units, there isn’t one “correct” choice. However, it’s helpful to understand the difference so that you can design with confidence. If you would like elements to scale proportionally, choose percent. If you would like fixed sizing or spacing of elements, choose pixels.
The nature of CSS means that columns can be a challenge to work with when it comes to responsive design. But as you’ll see in a moment, Thrive Architect makes your job easy. As you create your columns, consider how you want them to behave on smaller screen sizes.
Do you want the columns to stay in horizontal form?
Would you prefer that they wrap on smaller screen sizes?
Will it be necessary to reverse the column order on a smaller screen?
What’s super cool about Thrive Architect is that you can even choose different settings for each of the three different devices.
Oftentimes, the key to great responsive design lies in setting widths properly. Using the wrong width setting can cause odd-looking layouts at best, and it can cause elements to completely vanish at worst. Let’s take a look at the different settings:
An element that has a fixed width will stay the same width regardless of the screen size. (Don’t forget that there’s a big difference between absolute and relative units!)
For example, if you set a content box to display at a fixed width of 450 pixels (an absolute unit), it will display at exactly 450 pixels in width on desktop, tablet, and mobile — unless special directions have been indicated otherwise.
Note that if you use a ruler to measure an element with a fixed pixel width on different screens, you may see different measurements. This is because screens have varying pixel density (dots per inch or DPI). Behind the scenes, the element takes up the same number of pixels across devices.
Elements with a fixed relative width will scale in proportion to the container around it. For example, you can use percentages (a relative unit) to specify a fixed width. If an element is set to display at a fixed width of 50%, it will display at 50% of its surrounding container width across all devices.
Specifying a minimum width means that the element will be displayed no smaller than the size specified. This is helpful in cases where an element may end up displaying too narrow on a mobile device.
For example, let’s set a content box to a fixed width of 30% on desktop.
When we switch to the mobile editing mode, the content box is much too narrow for the text to be readable.
Setting a minimum width of 300 pixels for mobile devices would ensure that the column displays at a width where text remains readable.
Warning! Minimum widths should be used with caution. Setting an element width to a large minimum width (in pixels) can cause that element to extend beyond the page on mobile devices. (We’ll explain this more in-depth in a bit.)
Specifying a maximum width means that an element will take up as much horizontal space as possible, but no larger than the specified limit. This is useful when you want to limit the width of the element; it’s especially useful when you want to limit the width of an element on desktop only, but have it display as large as possible without extending beyond the page on tablet and mobile.
For example, let’s set the maximum width of a content box to 900 pixels. Since the desktop screen is larger than 900 pixels wide, the maximum width setting will constrict the width of the content box.
On tablet and mobile, since those screens are smaller than 900 pixels wide, the content box will simply fill the screen and the text inside will adjust as necessary.
A breakpoint is the specified number of pixels at which a website will switch from displaying one layout to a different layout. There’s a breakpoint between the desktop and tablet layout, and there’s also one between the tablet and mobile layout.
You can see breakpoints in action when you resize your browser window and watch the layout change.
In addition to website breakpoints, the Columns element has breakpoints as well. Column breakpoints ensure that columns will stack only when the specified minimum pixel quantity is met. This is useful when you want more control over the conditions in which columns wrap. In the example below, shrinking the browser window shows the column breakpoints.
So those are the basic CSS concepts that you need to know. Let’s move on to discussing the features and functions in the Thrive visual editor that will help you put these concepts to work.
The Thrive Editor and Mobile Responsive Editing
The Thrive editor has several features to help you make your website mobile-friendly while letting you be in complete control.
The Thrive visual editor offers three device editing modes: desktop, tablet, and mobile. They are located at the bottom of the screen.
Simply click on the buttons to toggle between the different modes. By default, the Thrive visual editor opens in the desktop mode.
As mentioned earlier, breakpoints are set pixel numbers that determine which version of the page (desktop, tablet, or mobile) will be displayed. The breakpoints in Thrive Architect and Thrive Theme Builder are as follows:
Any viewport wider than 1025px will display the desktop version of your page.
Any viewport narrower than 1025px but wider than 768px will show the tablet version.
Any viewport narrower than 768px will show the mobile phone version.
For the average user, there isn’t much significance to the actual breakpoint numbers, but it’s important to get a general idea of the various screen widths because it makes it easier to diagnose display issues and figure out how to remedy them.
For example, let’s say in desktop mode you’ve set an element to a fixed width of 1000 pixels. (We don’t recommend this; we’ll show you why and a better way to set widths in a moment.)
When you view this same page on a mobile device, you’ll discover that the element does not display correctly; the right side of the element goes beyond the right side of the page.
That’s because the breakpoint for mobile phones is 768 pixels, and since mobile phones have varying screen sizes, the actual screen width for most readers is likely to be even narrower. By knowing that the set width of the element exceeds the pixel width of mobile screens, it’s easier to understand why such an element isn’t displaying correctly.
The Responsive Option
Every element in the Thrive visual editor has a Responsive option. To access it, simply select the element and navigate to the Responsive tab in the left sidebar.
From here, you can toggle which devices will display a given element. This feature is handy when certain elements or sections get in the way of a user's experience on a particular device.
For example, on a long form sales page, you might display a quote on a decorative background. It may look great on desktop and tablet, but on mobile, the section takes up too much real estate.
If needed, you can hide the entire section by highlighting its Background Section element, and clicking the mobile icon inside the Responsive tab of the left sidebar to hide the entire section on mobile.
Now here’s a challenge that you might run into: After hiding an element, let’s say you want to show it again. How can you find and select an element if it’s currently hidden?
Simply click the “Show all hidden elements” toggle button to see all of the elements currently on your page – whether they’re hidden or not. Handy, right?
Custom Responsive Sections
On occasion, you might find it necessary to display completely different versions of a section on different devices. For example, if you're building a portfolio website, you might want to display links to your work that appear as thumbnails on desktop and tablet, but in list form on mobile.
To accomplish this, you can build two completely different Background Sections, and set each to display on different devices.
Warning! Creating device-specific sections should only be used when other techniques aren’t an option.
Although using the custom responsive section technique will hide certain sections on certain devices for human viewers, behind the scenes, all sections will load on all devices. Thus, adding custom responsive sections like this will increase page load times.
In addition, it’s possible that Google may flag a section that has been duplicated for responsive reasons as duplicate content. Although the Google algorithm may be smart enough to tell the difference between spam and responsive content, the safest bet is to avoid using this technique on key pages that you want to rank well in the search engines.
As we touched upon earlier, columns present a unique challenge when it comes to responsive editing (that’s just the nature of CSS). But the Thrive visual editor includes a few options to help you display your columns exactly as you want them.
Reverse Column Order
Let’s say you have a layout like this one, which looks unique and modern on a desktop computer…
… but on mobile it looks rather odd. The columns have wrapped, placing the title of our section below the first two columns.
To remedy this, you can reverse the column order on mobile.
Use the breadcrumbs to select the column element, then navigate to the Main Options, and enable the toggle button next to “Reverse Column Order”.
Much better, right?
Wrapping and Column Breakpoint
Another common issue that many people experience when using columns is that sometimes they don’t wrap as expected. Columns either wrap when they shouldn’t, or don’t wrap when they should.
You can control when columns wrap by adjusting the Column breakpoint.
For example, this is the current layout of our columns when viewed on a tablet:
What if we prefer the columns to display in a vertical format instead?
Simply enable the “Wrap columns” toggle button, and when the Column breakpoint option appears, increase the pixel value until the columns stack vertically.
As mentioned earlier, what’s super handy about Thrive Architect is that you can select different Column options (Reverse column order, Wrap columns, and Column breakpoint) for each screen size.
Styles Cascade Down (But Not Up!)
As you work to make your website mobile responsive, it’s important to know this rule: Style Customizations cascade down from larger to smaller screen sizes in the Thrive visual editor (but not up!).
We touched on this in a previous article, but it’s worth going over again:
Styles set in desktop mode will also affect tablet and mobile modes.
Styles set in tablet mode will also affect the mobile mode.
Styles set in the mobile mode will only affect the mobile mode.
For example, if you change the margins for an element when working in desktop mode, those changes will be reflected in the tablet and mobile modes as well.
If you change the margins for an element when working in tablet mode, those changes also will be reflected in mobile mode, but not in desktop mode.
If you change the margins for an element when working in mobile mode, neither of the larger screen sizes will be affected.
There’s one tiny catch that you also need to know: Editing an attribute (e.g. margins, padding, background image, etc.) for an element at a smaller screen size will unlink that attribute from the larger screen sizes.
This is probably easier explained with an example.
Let’s say that you’re working in mobile mode and you’ve set the left padding for an image to 200 pixels.
Because styles cascade down to smaller screen sizes (but not up!), the other left padding for the image in the desktop and tablet modes remains at 0.
So, what will happen if you edit the left padding in tablet mode? Will this change the left padding for the image in mobile mode as well?
Once you set a style for a smaller device, adjustments made to larger devices will not affect the specific customization that was already made for the smaller device.
So, you can go ahead and edit the left padding in tablet mode, and what was previously set in mobile mode will not change.
While this “tiny catch” might sound like an inconvenience in some cases, you can actually take advantage of the creative license it provides. For example, let’s say that you have a background image for a background section that looks great on desktop, but looks a bit too busy for tablet and mobile devices. You can specify completely different background images for each device.
Just remember that since the attributes are now unlinked, if you go back and change the background image in desktop mode, it will not affect the tablet and mobile modes.
That wasn’t too difficult, right? Now that we’ve covered the basic responsive features in Thrive Architect, let’s examine some common mobile editing mistakes and their solutions.
5 Mobile Responsive Editing Mistakes to Avoid (And What to Do Instead)
Mobile responsive editing can be pretty tedious — and frustrating — if you’re not familiar with the right techniques. What’s worse, uninformed mobile responsive editing can end up making your website look awkward, sending conversions into a nosedive.
In this section, we’ll go over some common mistakes that we’ve seen time and time again. If you’ve made any of these mistakes, don’t worry — you’re in good company.
Mistake #1: Starting Your Responsive Design Process with Mobile Devices
There’s a bit of a debate out there: Since mobile devices account for an increasing amount of web traffic, should you design your website for mobile users first, and then adapt your design to larger screen sizes second?
Here at Thrive Themes, we actually recommend designing for desktop first, tablet second, and addressing mobile design last. That’s because, as we mentioned earlier, styles cascade down (but not up).
Formatting your pages and posts in desktop mode first means that customizations will be reflected in tablet and mobile mode as well. Unless you are designing a complicated layout, the majority of your customizations will likely already look reasonably good on smaller screens, requiring only minor tweaks in tablet and mobile mode.
However, if you begin your customizations in mobile mode, you’ll almost certainly have to repeat every customization in tablet and desktop modes, tripling your workload.
Scary thought, isn’t it?
Of course, if you have a very specific reason for beginning your responsive design process with the mobile editing mode, that’s perfectly acceptable and your website will work just fine; for the majority of website owners however, starting with desktop mode is the fastest and most efficient use of your time.
Mistake #2: Huge Padding and Margin Numbers
As a general rule, padding and margins should be used for minor spacing adjustments. Large adjustments, such as moving an element that currently displays on the left side of the screen to the right side of the screen, should generally be done with alignment and advanced positioning options.
Let’s look at an example. Let’s say you’d like to display a Text element on the right side of the screen.
It may be tempting to simply increase margins or padding. Let’s input 650 pixels for the left margin.
However, when you switch to the mobile view, you’ll see that this method doesn’t work very well. Where did our Text element go?
The Text element is actually still there; it’s just been pushed off the screen by the large left margin.
Thus, it’s important to refrain from using large pixel numbers when setting up margins and padding. There’s two solutions you can apply instead.
Solution 1: Use Maximum Width and Alignment
Not only does this method achieve the same look, it translates well to smaller screen sizes. Let’s see how it’s done:
Step 1. Set the maximum width of the element. In this example, we’d like the element to take up approximately 50% of the width of the page.
With the Text element selected, navigate to the Layout & Position tab.
Under Width, select “Max”.
Change the units to Percentage.
Enter in a percentage quantity. In this example, we’ll choose 50%.
Step 2. Select the alignment for the element. In this example, we’ll align the element to the right.
With the Text element selected, navigate to the Layout & Position tab.
Under Alignment, choose the “Right Alignment” button.
And that’s all there is to it! Let’s view the element in the tablet and mobile views to see how that solution applies to smaller screen sizes:
Solution 2: Use percentage instead of pixels
Instead of using pixels as the unit of measure, you can switch to using percentage instead for a quick and easy fix. Because percentage is a relative unit (as opposed to an absolute unit), even if we input a fairly large number for the left margin, that measurement will scale along with the page.
Let’s start with our 650 pixel left margin.
Now, let’s simply change the pixels unit to percentage.
The Thrive visual editor will automatically translate the pixels quantity into the corresponding percentage quantity.
Let’s now view the page in tablet and mobile mode to see how the solution applies to smaller screen sizes:
Mistake #3: Using Large Pixel Quantities with Fixed or Minimum Widths
Elements that are assigned a minimum width will display the specified size or larger. Elements that are assigned a fixed width will display the specified size regardless of the screen size.
Here’s where it’s helpful to remember breakpoints: pages built with Thrive Architect will display the mobile version of a page when the page is being viewed on a browser window less than 768 pixels wide.
So, what happens when an element on a page is set to more than 768 pixels wide? Let’s set this Content Box element to 1000 pixels wide using a fixed width and see what happens. (Note that setting the width to a minimum of 1000 pixels will yield the same result.)
In desktop mode, the page looks fine. However, on mobile devices, things don’t look quite right.
Because the width of the element (1000 pixels) exceeds the width of the browser window on which the page is displayed (less than 768 pixels), the browser must accommodate that extra width by adding a horizontal scrollbar.
So, how can you avoid this situation?
Solution 1: Use the Percentage Unit Instead of the Pixel Unit
Remember, the percentage unit will scale the element proportionally to the container around it; whereas the pixel unit is a fixed measure.
Let’s make one simple change to our example. Instead of specifying width using pixels, let’s use percentage instead. The Thrive visual editor will automatically translate the previously specified pixels to the corresponding percentage.
Now, the Content Box looks as it should on tablet and mobile, scaling the width of the Content Box relative to its surrounding container.
If you would like to specify different widths for each device, you can easily do that in the Thrive visual editor. (Don’t forget that this will unlink the width attribute.)
Solution 2: Use Max Width
The maximum width setting will display an element so that its width will never exceed the quantity you specify. This translates well to smaller screens because the width of the element will automatically size to fit the browser window.
For example, let’s set our element to have a max width of 1000 pixels. In desktop mode, it looks the same as our original layout.
Now, let’s look at the tablet and mobile modes.
Looks good! Because we set a max width instead of a fixed width, the Content Box was automatically resized to fit.
Mistake #4: Using Columns When Another Solution Works Better
One of the most common mobile responsive design challenges you’ll likely come across is figuring out how to place two elements next to each other, while keeping them aligned properly across all screen sizes. For example, something like this:
There are many ways to accomplish this. For example, you may have tried to accomplish this design by using columns.
Unfortunately, when a user browses this solution on mobile, the page displays like this:
Mildly infuriating, right?
This specific situation is due to the columns wrapping on mobile devices. One way to approach this is to simply uncheck the “Wrap columns” option and move the column gutter, as shown in a previous article.
However, there are two more solutions that you may want to consider.
Solution 1: Use the Styled List Element
The Styled List element is handy because everything is pre-formatted. Simply swap out the icon for an icon that you prefer, and customize the text.
To center both elements as shown in our example, adjust the max width, and choose the center alignment setting.
Solution 2: Use Absolute Positioning, Max Width, and a Content Box
This solution works well because it's simple and easy to adjust across screen sizes. And, once you understand this method, you'll be able to apply it to several different elements, not just ones involving icons and text.
Step 1. Add a Content Box element. The Content Box is important because it will keep our two elements together.
Step 2. Add an Icon element inside the Content Box and select an icon. Then, align the icon to the left.
Step 3. Add a Text element to the Content Box and adjust the Text element Max Width.
Step 4. With the Text element selected, click on the Layout & Position tab, and open its Advanced dropdown menu.
Set the position to Absolute and choose whether you want the element to be positioned in the top left, top right, bottom right, or bottom left corner of the container. In this example, we’ll choose top right.
At this point, the Icon and Text Element are quite far apart, but this will be adjusted in the next step.
Step 5. Select the Content Box and adjust its Max Width. It's important that the Icon element and the Text element are centered horizontally inside of the Content Box in order for alignment in Step 7 to look nice.
Step 6. Fine-tune the positioning of the Text element. With the Text element selected, re-visit the Absolute positioning settings. Use the directional fields to adjust the position of the Text element. You may need to re-select the appropriate corner to see the fields.
Step 7. Center align the Content Box.
Step 8. Make the necessary positioning adjustments in tablet and mobile editing modes.
But here's where you might have trouble: Depending on the absolute position and the widths that you've chosen, there's a chance that your element may fall off the page when you visit the mobile editing mode.
This happens when you select the top left or bottom left Absolute position, and then input large numbers in the adjustment fields.
To remedy this, use the top right or bottom right Absolute positions instead.
Mistake #5: Not Grouping Elements That Should Stay Together
One of the most frustrating challenges with responsive design is when you build your layout in desktop editing mode, but things fall apart in tablet and mobile modes. For example, you might use Absolute positioning to create the layered effect below.
It looks fine when in desktop editing mode, but the number moves outside of the image when we view the page in tablet and mobile modes.
What’s going on?
The problem is that there’s nothing forcing these elements to stay close to each other. There needs to be some kind of structure to group these elements together.
The solution: Place both elements inside a Content Box.
Let’s see how it’s done:
Step 1. Start with a Content Box element. The Content Box is important because it will keep our two elements together.
Step 2. Add an Image element to the Content Box.
Step 3. Add a Text element inside of the Content Box, beneath the Image element.
Step 4. Position the Text element using Absolute positioning, located in the Layout & Positioning tab, and in the Advanced tab.
There you have it! Now, your Image and Text elements will stay layered on all devices.
So those are just a few of the most common mistakes that people seem to make when mobile responsive editing their pages. Hopefully, understanding these mistakes is just as helpful as understanding their solutions.
Ready to Tackle Responsive Editing?
With these tips under your belt, you’ve got everything you need to be a responsive editing wizard! We covered breakpoints, columns, width choices, common mistakes, and more.
But, of course, if responsive editing isn’t exactly your thing, you can always just use the Page Block & Landing Page templates that come with Thrive Architect and Thrive Theme Builder. They’re mobile responsive right out of the box!
Not a customer yet? Grab both (plus the rest of our tools!) by getting Thrive Suite.
Still have questions about how to mobile optimize the pages and posts of your WordPress website? Leave us a comment below so we can answer them for you!