Mobile Responsive Editing 101 (+ 5 Mobile Editing Mistakes and How to Fix Them)

Responsive Editing the Easy Way

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.

Columns

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.

Width Options

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:

Fixed Width

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.

Minimum Width

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.)

Maximum Width

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.

Breakpoints

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.

Editing Modes

The Thrive visual editor offers three device editing modes: desktop, tablet, and mobile. They are located at the bottom of the screen.

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.

Columns

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.

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:

Looking good!

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.

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:

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.

Voilà!

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.