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

Author
Christine   33

Updated on January 31, 2021

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.

Read on to learn the basics of mobile responsive editing in Thrive Architect and Thrive Theme Builder.

More...

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.

  • Absolute units are fixed, measurable units. A good example of an absolute unit is the pixel.
  • Relative units are expressed in relationship to another object.
  • Percentage refers to the relationship between the object and the container immediately surrounding it. 
  • Viewport height refers to the height of the browser window.
  • Viewport width refers to the width of the browser window.
  • Em refers to the currently specified font size. For example, if the font is specified as 12 points, one em is equal to 12 points.

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

Thrive visual editor Layout & Position tab

The Layout & Position tab with the units options highlighted.

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.

Absolute versus relative units

The difference between using an absolute unit, such as pixels, versus using a relative unit, such as percent.

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?

Columns example horizontal

Would you prefer that they wrap on smaller screen sizes?

Columns example wrap

Will it be necessary to reverse the column order on a smaller screen?

Columns example reverse order

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

Thrive visual editor fixed width

The Layout & Position tab with the Fixed Width option highlighted.

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.

Fixed width example

A content box set to a fixed width of 450 pixels will display at 450 pixels in width on all devices.

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.

Relative width example

A content box set to a fixed width of 50% will scale according to the size of its surrounding container, which in this case is the full width of the screen.

Minimum Width

Thrive visual editor minimum width

The Layout & Position tab with the Minimum Width option highlighted.

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.

Fixed width percentage on desktop

When we switch to the mobile editing mode, the content box is much too narrow for the text to be readable.

Fixed width percentage on mobile

Setting a minimum width of 300 pixels for mobile devices would ensure that the column displays at a width where text remains readable.

Minimum width on mobile

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

Thrive visual editor maximum width

The Layout & Position tab with the Maximum Width option highlighted.

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.

Maximum width mobile responsive

A content box set to a specific maximum width will automatically adjust on smaller screens. 

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.

Mobile responsive breakpoints

The elements on the page rearrange themselves as breakpoints are encountered.

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.

Thrive visual editor column breakpoints

The columns rearrange themselves as breakpoints are encountered.

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.

Thrive Themes editing modes

The Thrive visual editor with the desktop, tablet, and mobile editing modes highlighted.

Simply click on the buttons to toggle between the different modes. By default, the Thrive visual editor opens in the desktop mode. 

Breakpoints

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

Fixed width content box desktop

An element set to a fixed width of 1000 pixels, displayed on a computer.

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.

Fixed width pixels mobile

An element set to a fixed width of 1000 pixels, displayed on a mobile device.

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.

Thrive Themes responsive tab

To view the responsive options for a specific element, click on the element, check the breadcrumbs to ensure that the right element has been selected, then click the Responsive tab.

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.

Custom responsive sections

To hide a section or element, simply toggle the buttons in the Responsive tab.

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?

Responsive tab show hidden elements

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.

Mobile responsive sections on different devices

An example of how you can display two completely different sections on different devices.

To accomplish this, you can build two completely different Background Sections, and set each to display on different devices.

Setting different mobile responsive sections in Thrive

To specify which devices display which sections, use the toggle buttons in the Responsive tab.

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.

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…

Responsive design reverse column order

… but on mobile it looks rather odd. The columns have wrapped, placing the title of our section below the first two columns.

Wrapped columns mobile device

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

Reverse column order mobile responsive

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:

Responsive column order 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.

Reverse column order and wrap columns

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.

Mobile responsive - styles cascade down

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.

Responsive editing change in tablet mode

If you change the margins for an element when working in mobile mode, neither of the larger screen sizes will be affected.

Mobile responsive change to mobile mode

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.

Mobile responsive change margin mobile mode

A example photo with the left margin set to 200 pixels on mobile devices only.

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.

Mobile responsive unlinking change to smaller screen size

An example photo showing how a change made to the tablet mode does not cascade down to the mobile device; this is because the 200 pixel specification made in mobile mode unlinked the left margin attribute.

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.

Mobile responsive different background images

A background section where a different background image was specified just for mobile devices.

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.

Mobile responsive huge padding numbers

A Text element with the left margin set to 650 pixels.

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?

Mobile responsive image disappears on mobile

The Text element appears to have disappeared in mobile editing mode.

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

Maximum width using percent

A Text element set to a Maximum Width of 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.

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:

Mobile responsive using maximum width and right alignment

The Text element looks much better on tablet and mobile devices. 

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.

Mobile responsive - huge padding numbers

The Text element with the left margin set to 650 pixels.

Now, let’s simply change the pixels unit to percentage.

Use percent instead of pixels mobile responsive

The Layout & Position unit options.

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:

Mobile responsive use percentage

 The Text element with the left margin specified as a percentage, in the tablet and mobile device editing modes.

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

Mobile responsive large fixed width pixel quantity

A Content Box with a fixed width of 1000 pixels.

In desktop mode, the page looks fine. However, on mobile devices, things don’t look quite right.

Large fixed width pixel quantity causes horizontal scrollbar

A Content Box with a fixed width of 1000 pixels goes beyond the edge of a mobile device screen, causing the device to display a horizontal scrollbar (highlighted).

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.

Using percent instead of pixel

The unit options in the Width field highlighted.

Now, the Content Box looks as it should on tablet and mobile, scaling the width of the Content Box relative to its surrounding container.

Content box with fixed percentage width

A Content Box with a fixed percentage width scales in relationship to its surrounding container, which in this case is the browser window. 

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.

Maximum width

A Content Box set to a Maximum Width of 1000 pixels.

Now, let’s look at the tablet and mobile modes.

Maximum width resizes on smaller screens

The Content Box has automatically resized to fit on tablets and mobile devices.

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:

Keeping icon and text together on mobile screens

There are many ways to accomplish this. For example, you may have tried to accomplish this design by using columns.

Using columns in responsive design

An example of how you might set up two elements using the Columns element.

Unfortunately, when a user browses this solution on mobile, the page displays like this:

Wrapping columns causes odd layout on mobile

An example of why using columns to keep two elements together may not work on mobile.

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.

Thrive visual editor wrap columns

An example showing that unchecking the Wrap columns option and moving the column gutter may achieve the desired result.

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.

Styled List element for responsive design

To swap out an icon, navigate to the Icon's Main Options tab.

To center both elements as shown in our example, adjust the max width, and choose the center alignment setting.

Max width and center alignment

The Maximum Width and the Center Alignment options highlighted.

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.

Adding a content box

Step 2. Add an Icon element inside the Content Box and select an icon. Then, align the icon to the left. 

Adding an icon to the content box

Step 3. Add a Text element to the Content Box and adjust the Text element Max Width.

Adjusting the max width of a text element

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.

Advanced settings absolute positioning

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.

Content box max width

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.

Adjusting absolute position

Step 7. Center align the Content Box.

Center alignment

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.

Layered elements in Thrive Themes

An Image with a Text element layered on top.

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.

Layered elements in Thrive and mobile responsiveness

The Text element moves when the page is viewed in tablet and mobile editing 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.

Adding a content box

Step 2. Add an Image element to the Content Box.

Adding an image to a content box

Step 3. Add a Text element inside of the Content Box, beneath the Image element.

Adding a Text element to a content box

Step 4. Position the Text element using Absolute positioning, located in the Layout & Positioning tab, and in the Advanced tab. 

Using absolute positioning

There you have it! Now, your Image and Text elements will stay layered on all devices.

Using a content box with absolute positioning for mobile

The Text element layered on top of the Image element in tablet and mobile editing modes.

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!

by Christine  November 25, 2020

33

Enjoyed this article ?

You might also like:

Leave a Comment

  • This is just an orientation thing right? Nothing to do with AMP which is an area I am trying to wrap my head around. Is AMP beneficial to Google or the developer/marketer in the SERPS?

    • Hi Peter,
      Yes this is about displaying content not about AMP.

      AMP is a bit of a pickle.

      On the one hand, Google is trying to push it (with the updates in the mobile SERPs) but on the other hand, it’s still pretty limiting in terms of available “AMP content types”.

      So far, most of the internet agrees that if you’re a news site (think CNN), you need AMP and it’s worth investing the time and work around the restrictions. If you’re a “normal” website, AMP will cause you more headache than benefit.

      So for most of our users, my recommendation is to optimize your website for mobile (both on display using the information in this article and on things like image size etc.) but to stay away from AMP.

  • Many thanks, Christine. This is sooooo useful! When I am building pages quickly, I often don’t give thought to these kinds of practical ideas, and I can end up with some ugly situations. I have a lot of tidying up to do!

  • Great article, Christine – you took a confusing subject and made it super clear by utilizing very helpful visual examples. Mobile design is my Achilles’ heel for sure. I get busy working on a desktop, and most of my designs look decent on a tablet, but I just don’t have time to check them on mobile. Then when I actually have to access them on a phone, I realize what a disaster they are, and I have to go back to fix things. 😉

    I think the best practices you outline – using relative units and being cautious with max/min settings- definitely set mobile to look better from the get-go. Thank you!

  • This is SO helpful!! I don’t even know how long this took to compile, and I haven’t even read through half of it! This will be super useful to apply to my website, thank you so much Christine!

  • These are some pretty cool tricks that I could have personally used way back. I’ve been using Thrive products for about 5 years and I just learned some nice mobile responsiveness gems. Thanks Christine.

  • Amazing content Christine, I saved the post for future reference. One thing I have been struggling with: mobile responsiveness when dealing with absolute and relative settings. All clear now! I also did the mistake of adding outbound links “as is” in my posts’ content; not setting anchor text to a link means that the webpage will be scrollable horizontally on mobile… not really good UX indeed.

  • Thanks a lot – this is so helpful.
    Even if I found out most of the things by my own, it’s amazing to see them all explained that structured and clear.

    Did I mention that I love the Thrive Theme Team? I do!

  • Do you want the columns to stay in horizontal form?

    I feel like you asked this question, but never answered it?

    I’d like to keep my columns horizontal for mobile.

    • It depends…
      If it’s data that is supposed to be read in lines than yes. If not then no.
      Often you DON’T want columns because it will make the information unreadable.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}