These days, any self-respecting WordPress theme or plugin will be mobile responsive by default, meaning that it will resize and rearrange to fit medium and small screens.
But if you want to make your content not just mobile responsive but truly mobile friendly, there's more to it than just installing a responsive theme and calling it a day.
If you've ever wondered: "how should I create my content/landing pages/opt-in forms for mobile devices?" today's video is the answer you've been waiting for!
This post has been updated to reflect the changes made in the Thrive Architect plugin.
More...
Thrive Themes & Mobile Friendliness
All of our themes and all of our plugins are responsive and mobile friendly by default. Meaning, they aren't only mobile responsive, they are also up to Google's "mobile friendly standards.
So, anything you create with Thrive Architect and related products will adjust to fit different screen sizes.
Note: Does All This Seem a Bit Complicated?
In the video, I go into some detail about nuances of creating mobile friendly content. Isn't that a bit much, if all you want to do is create a quick page or blog post?
Indeed it would be. That's why all of our templates already follows all these rules and are fully mobile friendly. If you load one of our templates, you don't need to know any of this. But if you want to make major changes to a template or build something from scratch, these tips will help you make it awesome.
Here's a summary of the tips from the video:
Tip #1: Use Images at Their Optimal Size
Starts at 00:30
Nothing slows a website down more than oversized images being loaded all over the place. The ideal size for an image file is the maximum size it will ever be shown at. So, if you resize an image to be 400px wide on desktop screens, then the image file itself should ideally be resized to be no wider than 400px.
Fortunately, images can be resized directly in your WordPress media library:
The quality of image scaling in WordPress isn't amazing, but it's better than uploading gigantic image files.
Why isn't this automated?
The technology for automatic image scaling exists, but it always has some downsides. That's why we don't have such a feature in our products yet. Image scaling is something we will work on improving, as soon as a good solution emerges.
Tip #2: Show/Hide Elements for Inline Changes
Starts at 3:17
In Thrive Architect, you can toggle the visibility of elements for different screen sizes. It's a straight-forward change that can be applied to any element and even entire parts of your page (e.g. everything contained inside a background section).
For most responsive content, it's not necessary to use the show/hide feature (see next tip). Show/hide is most useful for "inline" changes. For example:
- Showing different text content on different screen sizes.
- Changing the order of elements (by drag and drop) on different screen sizes.
These changes can be done by duplicating an element, making the changes to the duplicate and then showing/hiding the two copies on appropriate screen sizes. For everything else, there's a better way:
Tip #3: Apply Responsive Style Changes
Starts at 4:29
This tip is the most important one you need to know about for mobile friendly editing. It's also the most specific to Thrive Architect because, as far as I know, there are no other editors for WordPress that offer responsive editing at this level of detail.
The rule is as follows: anything you change in the sidebar options of Thrive Architect is mobile responsive. That means you can change those sidebar settings for specific screen sizes.
Styles Apply Down, Not Up
Any styles you apply on the largest screen size will be applied to the smaller screen sizes as well. Any style you apply to the medium screen size apply to medium and small screens. Any style you apply to the smallest screen size only apply to the smallest screens.
In other words: style changes you make cascade down to smaller screens, but not up to larger screens.
What Styles Can Be Edited Responsively?
In short: everything you see in the sidebar. That means you can make:
- Font sizes, font color, line height
- Margins, padding and positions
- Background images, background colors, overlays
- Borders, corners, shadows
...(and much more) adjust for specific screen sizes.
Tip #4: Use Alignments & Max Widths
Starts at 8:50
Text can be left, right or center aligned. This is something we're familiar with and it seems obvious to use the alignment options rather than trying to center align some text by adding side margins or padding.
The same principle applies to other elements as well.
For example, content inside columns can be aligned to the top, vertical center or bottom:
Also, instead of adding large side margins or padding, always consider the "max width" option first:
Using the max width settings, you can change the width and alignment of any element. You can also apply these settings to everything inside a content box.
Max width is much more mobile friendly than side margins or padding, because it won't lead to scrunched up content on smaller screens.
Tip #5: Use Column Layouts Instead of Wrapping Text Around Images
Starts at 12:52
In Thrive Architect, you can add images to your text content and make the text wrap around the image. However, in most cases this is not a great solution.
Text wrapping around images looks good on large screens, but it will lead to text being squeezed into a very narrow space next to the image, on smaller screens:
Text wrapping can be used for small images and icons. For an image like the one of the cat, an option is also to resize it on smaller screens, since the cat is recognizable even at a small size. However, if you have images that contain information that needs to be understood, text wrapping and image resizing aren't a good option.
For large images, diagrams and illustrations, it's much better to use column layouts than text wrapping.
Tip #6: Use the 20/10px Rule for Side Padding
Starts at 14:32
Side padding is important, but should generally be used in small amounts. Without side padding, your content will run along the very edges of small screens and that doesn't look very nice.
As a rule of thumb, make sure that text content has 20px padding on each side for large to medium screens and reduce it to 10px padding on each side for small screens.
Less Work, Same Result
If you're building a landing page from scratch, using our blank template, then the 20/10px side padding rule is already applied by default.
Also, you shouldn't add the side padding to text elements. Instead, add it to elements that contain the text (such as content boxes and background sections).
Tip #7: Work from the Outside In
Starts at 16:25
The above note is an example of this principle. Instead of applying the 20/10px padding to each text element, start from the outside and apply the padding once, to the container element.
Follow the principle of "outside in" to achieve the layouts you want in fewer steps and with leaner code as an end result. You can see an example in this landing page from scratch video. The work you see me do at the beginning, preparing my headings and background sections is exactly such "outside in" work. As a result, I can build the entire page faster, in fewer steps.
Tip #8: Work from Desktop to Phone (With 1 Exception)
Starts at 18:00
A good workflow is to build your content on the largest screen size until everything is done. Then, switch to the tablet view.
In this view, you usually don't have many changes to make, since everything is responsive by default.
After making some minor adjustments in tablet view, switch to phone view. Here, you'll usually have some more tweaking and adjusting to do. Once that's done, your page is finished and looks great on every screen size.
There's one exception to this "desktop to phone" workflow: before you duplicate an element to reuse it on your page, check it on all screen sizes and make adjustments where necessary. That way, the duplicate of your element will also be mobile friendly and you don't have to do the same work twice.
What About "Mobile First"?
You may have heard of the "mobile first" approach to web design. It has many advantages, but as you can see from this tip, we advocate the "desktop first" approach.
Why?
Because to follow mobile first, you would literally have to spend most of your time creating content and pages in the tiny phone view and later make some adjustments for larger screens. This workflow is not conductive to rapid implementation and is really difficult to do well unless you have a deep understanding of CSS.
We believe there's a way to skip past the step of mobile first and get a better result. But more on that will be revealed later...
Occam's Razor of Mobile Friendly Content
Occam's razor is a principle often referred to in medicine which states that the hypothesis making the fewest assumptions is most likely to be true.
In web design, there's a related principle to remind us to keep things simple: the solution requiring fewer steps to achieve the desired layout is probably the best one.
There are always many different ways to arrive at the layout you want to build. To achieve clean code, make your content mobile friendly and also make it easier for future editing, try to arrive at your desired layout in the fewest steps possible.
If you are looking for mobile landing page ideas, check out our post about 13 Mobile Landing Page Best Practices. In this post you can learn about the 'do's an don't's of creating mobile landing page designs.
How Else Can I Help You?
Do you have any questions about making your content as mobile friendly as possible? Any tips of your own to add? Are there other things you'd like me to cover in tutorials or courses?
Let me know by leaving a comment!
Great tips. Thanks a lot
Thank you, Joe! Happy to know you enjoyed this update!
Hi Shane, thanks a lot for that explanation. …the content box is the solution, to the missing % by the margins and paddings. very good to know!
Yes, that’s it. I prefer this to relative margins, since on small devices, even a small relative margin like 20% can end up eating space unnecessarily.
Useful guidance as always.
Thank you, Bruce.
Very helpful! Thanks.
Glad you found it helpful, Maureen!
Hi Shane,
thank you very much for your constantly good recommendations.
..and i’ am glad to be a customer, all your Website-Products are great and easy to use for me as a beginner, and in addition, your service from your team is really really well too.
Best regards,
Maik
Thank you very much, Maik!
Excellent value-add, as usual. Do you recommend setting-up certain pages as mobile-only (with like 70% less content) and if so, is there a way to designate which menu/pages are seen by mobile devices, vs. a full-sized screen?
Hello Russ,
I don’t recommend setting up separate pages for mobile, no. The lines between mobile and non-mobile are blurring, so I think a separation like that isn’t a long-term solution. We’re working on an update in Thrive Content Builder that will help you with more mobile friendly options, though.
Great tutorial. Explained a lot! Thank you
Thank you, Voula!
Nothing beats “field experience.” 😉
Thanks for the useful tips…
Thank you for your comment, Trevor!
Thanks Shane! Love your periodic video updates, super helpful and quick. Thanks heaps. 🙂
Thank you, Renee! I’m very happy to know that you benefit from the updates. 🙂
Great tips as always – thanks Shane!
Thank you for your comment, Dan!
Thanks Shane this was extremely helpful. I have been very impressed as a new member . . . wow! I have already recommended you guys to a few friends.
Thank you for helping us get the word out, Jay. 🙂
Shane, that is a nice tutorial for mobile responding which I ever heard about. Actually, there were many mobile responsive themes and plugin for WordPress but it look like content building plugin was a better. Thanks for share..
Thank you, Kimsea!
Great tips – does adding a content container also work for landing pages? I have added content containers but they don’t seem to have the margin slider.. am I doing something wrong?
Yes, it should work there too. If something doesn’t work, please let us know in the support forum.
Love you! When I watch your vids there is always value. Thnx
Thank you, Alexander!
Great tips! Thanks! Another suggestion on verifying mobile views is to use Google Chrome Browser. Right click on the page you want to verify, select “Inspect” and then in the upper left corner, you can select mobile device screen sizes. Maybe this is overkill compared to just shrinking/expanding the browser screen, but I found it very helpful especially if you want to see what the portrait and landscape views look like.
Wow, that’s really cool. I didn’t know this was one of the features, so thanks for the tip!
Short and very helpful! Thanks for taking time to put this together…very much appreciated.
Thank you, Miles! Glad you liked it!
Thanks Shane! One question about images… your selected cat image was 500px. What if someone is on retina? Will it look blurry? Or should we always be uploading the proper size for regular display only?
On a high DPI screen, the image won’t look as crisp as it could. However, since a typical high DPI version of an image is four times larger, that means it’s also four times slower to load. Since speed is so important, it’s not worth slowing down the site for everyone, just so pictures look a bit nicer on high DPI devices.
Having said that, technologies for detecting screen resolutions and sizes and then serving up the right image (instead of serving the larger image to everyone) are maturing and I think we’re close to seeing a good solution we can implement in our tools as well.
Hi Shane, nice to know that you are close to seeing a good solution on technologies for detecting screen resolutions. I am a graphic designer and keen for showing my images in retina resolution. So now I’m uploading my images 2x the size (instead of 4 times the size). But I slowing things down for everyone now. So please make this a feature in the nearby future. That would be great! Keep on rocking!
I’m eager to have this feature as well! It’s actually something we’ve been discussing since the very first Thrive Theme.
Shane, would be great if your videos were accompanied by a text summary of key points. Some people (myself included) prefer to scan test than watch a video
Thanks for the feedback, Maurice!
Great tips Shane. Thank you!
As developer myself, I use chrome’s built in mobile preview which is helpful. To use it, press F12 on keyboard or right click on browser screen and click inspect element. There is a mobile icon on top left of the popup window. Click it to activate mobile preview.
That’s an awesome tip. Thank you!
Thanks for this video. I’ve learned something new today, the usage of the content container.
Thank you for your comment, Horst!
Nice Shane! This is useful. I would love to see a part 2 of this where you go through how to fix things thru css that don’t look right on mobile. Sometimes weird things happen and it would be good to know how to correct it in css based in various mobile sizes.
Hi Tom,
We’re working on something that will make such CSS changes unnecessary. I can’t reveal more, at this point, but it’s something we’ve had our eyes on for a while. 🙂
Indeed helpful tips for making content mobile friendly.
Thank you, John!
Hello Shane, essential information, thank you!
Glad you liked it, Ludolf!
Thank you for the video. Some great tips for making a website more responsive for mobile devices.
In my opinion, sometimes it is better to have a separate dedicated mobile website instead of 1 responsive website. With 2 separate websites you can now customize your content specifically for the type of device your visitor is using. Shane, do you agree with this from a marketing perspective?
I have a two part answer to this.
1) From the user perspective, building a page for large screens and one for small screens is not ideal. It’s not a good workflow, to have to build everything twice.
2) From a visitor perspective, the emergence of AMP and FB Instant Articles indicates that it can be good to have a separate mobile-only version.
We are looking into this, to see how we can give you the advantage of point #2 without the disadvantage of point #1.
This plugin is just beautiful 🙂
Thank you, Brayan! 🙂
Mobile friendly themes & plugin helps us to increase our conversation also It’s a part of google ranking algorithm.I’m a fan of thrive themes.keep it up 🙂 waiting for next good news
Thank you, Noman!
Thanks Shane. I got some work to do now. Q. If using an auto-responder code in a content container, which takes priority? The width of the code for the form, or the content container?
That depends on the code. If it’s decently written, it should go no wider than a container placed around it.
I’ve always wondered why some things get totally squished on phone screens – now I know about using content containers instead of margins. It’s a little tip but goes a LONG way. Thanks Shane 🙂
Glad you found this useful, Tim!
Hi Shane,
First day playing with the Leads plugin. Love it. You can do so much with it.
Problem. I created a Light box. It display on desktop just fine. On mobile it displays fine in horizontal orientation but in vertical orientation the top text box display half off of the page to the right 🙁
Not sure how to fix this…
Please post in the support forum and we will resolve this for you.
Fantastic article , appreciate it
how do you resize the content creator to adjust width of text boxes- the control slider you have on your content box I dont have….?
Very helpful. Nice to know before jumping into the new project.
Thanks, John!
Mobile friendly Content is useful and this gives your Website rank in search results on mobile.Thank your for sharing this.
Hi Shane,
Appreciate your tips!
Question about the best way to add icon images so they take up much less space on a phone. I’ve tried putting them in a column format. Still excessive white space on a phone.
Hi Keri,
You can now change the space around icons (and other elements) depending on screen size.
really helpful Thanks!!
Glad you liked it!
What about if you are using an amazon associate image by using custom HTML, as this is not classed as a standard image?
As far as I know, those images aren’t oversized and they’re quite strongly compressed, so you should be fine. 🙂
Its so strange, I followed the guide… I have 1/2 1/2 column layout, in the first 1/2 column I have another separation 60/40% with column layout again, I use Lead Generation form in the 60% part and a small image (pointer to the form) on the 40% part.
http://www.fitmateptonline.com/kitchen-rescue-pak/
And this is what happens when I get it to mobile view…
https://postimg.org/image/fr5bzxwdz/
Please dont tell me to post ticket because Its 7th day Im stuck with this…
This is the email I used to buy the plugin
From the picture it seems like you applied a negative margin on the form instead of the page section… Also I would switch the column order for the arrow and the opt-in form so that the arrow is on top.
About the support forum, you can not open tickets with an account that does not have products attached. I’m sure you’ll understand we can not offer support for people who did not buy the plugin!
This was just the info I needed. Unfortunately, I found it AFTER I had built my pages using margins and paddings. My sales page in particular looks really weird in anything but 100% magnification.
So I’m wondering, other than rebuilding the page from scratch, what is the quickest way to add the content container to the page and put the elements in? I tried adding it and then dragging my existing elements there but I lost contact with the content container after a while and also some of the settings started to change on me as I was dragging things around and working with them. So that’s a bunch more work. Any suggestions would be appreciated. Just need the quickest way to replace the work I did before I knew about the content container. Thanks!
Nice Tips. I have a question about the last tip. What if you wanted the cat to be on the right side, but on smaller devices you want it to show above the content instead. I have used another editor in the past and basically I had two separate 2-column blocks.
On larger screens it would be as you show in the video, but as the screen got smaller it would hide that column block and the second would appear. I would reverse the order (meaning the cat picture on the left instead of right) so the cat showed above the content as the screen narrowed.
Great post as usual!
I have one question in that regard. If I am using a background image, lay a opt in form on top of it and the image size gets adjusted based on the device the form might end up on top of part of the image that would not be considered a good background. Any suggestions for this?
Hello Stephan,
The best way to do this is to set the image as a background for a content box and choose “stretch” for the image display. That way, it will always cover the entire content box area.
You can then place the lead generation form inside the content box.
I am having this problem with my landing page on thrive theme but I still cant fix it. any plugin that can help?
Hello Emmanuel,
The video has been updated to show how responsive editing can be done in the new Thrive Architect plugin. This also works for landing pages.
Thank you, Shane. It all makes sense, which is so nice!
Thank you, Maureen!
Is there a way to automatically redirect mobile traffic to a page designed for mobile?
No, we don’t have such a feature.
Another great video that helped me solve the issue with the pesky 1-2 words off to the side of an image. Thank you! I really need to take some time to go through the academy. So many great features.
Hi Shane,
Thanks so much for this, it’s really helpful.
I’ve got the Squared theme and the header, footer and menu display in different colours on the mobile version than they do on my desktop site. Any idea why that might happen?
Sally
Does thrive themes has mobile preview that allow us to check the result of our work immidiately.
Not yet, but it’s coming in the 2.0 version.
The video has now been updated to show this feature.
Is there a way to hide/show elements based on device type within the settings for Thrive? Or is there a recommended way to do this?
Hi Chrissy,
The video has been updated to show how this is done in Thrive Architect. 🙂
Thx Shane.
I switched a few days ago to thrivethemes and it seems to be awesome, but:
How can i make headings responsive? I’m using the squared theme and my heading on desktop is 47px. that works fine but if i switch to a smaller device it’s still 47px. Usually i just scale it down via css but is there a “smart” way without creating a custom class just for scaling the size of a header? i mean, that’s one major responsivity function for readability…
Thanks a lot,
Alex
If you look in your member area you’ll find a lot of Thrive Architect tutorials. One of which is a 28 minute project tutorial. Near the end Shane goes through working with the headers such that it looks the same on desktop but scales correctly on mobile.
Hi Alexander,
In the themes, we don’t have the responsive editing shown here yet. We will be adding this to the new theme we’re building, of course. In the meantime, custom CSS is the way to go, though.
Outstanding new features and well thought out design. Thanks for your continuing improvements! You guys set the standard for the industry as far as I’m concerned…
Thank you very much, Mike!
You have just stopped me ripping out what hair I have left. Keep these tutorials coming.
Glad to hear it, David! Please let me know if there’s anything else frustrating you, that we could help out with a tutorial.
Really good info here Shane, thank you. Clearly explained, totally applicable to daily work… just great.
Thank you, Kendrick!
Stunning… All of you are the BEST!!!
Thank you for your kind comment, Deborah! 🙂
Shane, thanks SO much for (1) having the text summary below the video, and (2) having the time in the video where each tip begins. Those 2 things make your already-very-valuable video tutorial even more valuable.
Cheers,
Grant
Thank you for your feedback, Grant! Glad you like the format of this post. 🙂
great stuff again, thank you!
Thanks, Matthias!
Awesome content Shane. Thrive Architect is the business. Your videos are always direct and to the point – that’s why I watch them all the way through and recommend Thrive to every one I meet. No BS is the way to be.
Thank you, Quentin! Very happy to know that you find my tutorials worth paying attention to.
Thanks for another excellent tutorial, Shane. This is one of many reasons you guys are the best.
Thank you very much, Esta!
As usual…useful, precise and clear. Thank you!
Thank you, Anton!
This was very enlightening to me. Thank you!
Great! Thanks for your comment, Scott!
This could not have arrived at a better time. We are about to redo our academy homepage to be more mobile friendly and load faster. Thank you, Shane. Always great training.
Glad to know this was useful for you!
Excellent… and timely. I was about to walk away from WP/TT because my blog looks horrendous on mobile. Saved me with this vid, Shane!!
That’s great to hear. Thank you, John!
Adjusting margins and padding have always been one of the issues I face when creating my sites. I just never really understood when and how to use them. Your video has “FINALLY” clarified this for me. Thank you Shane. Anytime I am faced with a challenge or need help with something, I can always count on Thrive Themes, and of course Active Growth. Thank you for always making time for us, it is greatly appreciated.
Thank you, John! I’m very happy to know that this clarified things for you! 🙂
I loved your mention of “Future Self” Great tips. Thanks
Thank you, Dale! Gotta be kind to future you. 😀
Excellent suggestions. Thank you for the training. I’ve been using WP for about 6 years and I’m learning so much from your video training. Plus the work that went into developing Thrive Architecture is much appreciated.
Thank you for your comment, Linda! That means a lot to me!
Brilliant – this was one of the best!!
Thank you, Joey!
Thanks, Shane. Valuable Content.
Funny thing is your own website lacks some responsiveness. On the iPad the top menu goes into full browser height leaving 90% of the page white. Also the rows on your homepage stretch to wide so I‘d call it buggy. Thought you might be intersted. Posted that to your twitter already with a screenshot but looks like you‘re only automatically posting content there.
That’s odd… I’ve never seen this happen on the site, but we’ll look into it. Thanks for pointing it out!
Of course, we don’t have the luxury of Thrive Architect style responsive editing for the header. Yet. But this kind of editing and responsiveness for themes is a project we’re working on as well, of course. 🙂
why do the mobile emulators portray a different layout than the Architect tablet and mobile view? Specifically the Architect mobile view (360px width) looks different than Google Chrome Developer Tools device toolbar and other emulators i can find by searching google.
Hi Jason,
That depends on whether scaling is applied and how it’s applied. Simulating a phone screen on your computer screen is tricky, because there are several variables involved: the physical size of your screen, the physical size of the phone screen, the pixel density of your screen, the pixel density of the phone screen, the scaling on your screen and the scaling on the phone screen.
As a simple example, you might have a 17″ monitor with a 1080p resolution. And then you have a 6″ phone with a 1080p resolution. In this case, the pixel density on the phone screen is roughly 3x that of the monitor. The phone screen will probably scale content to 200%, compared to the monitor. That means everything represented by one pixel on your monitor is represented by 4 pixels on the phone screen.
That’s a pretty straight forward example of scaling and, if we know all the variables, we can simulate the phone on the monitor fairly easily.
Of course in reality, there are infinite combinations of all the above mentioned variables, which makes all this rather complicated. In Thrive Architect, we don’t apply scaling for the tablet and phone edit views. You have to think of the edit views as guidelines. There’s no tablet in the world on which the content will look exactly like it does in the “tablet” preview mode in Thrive Architect. And there’s no phone in the world on which the content will look exactly like it does in the “phone” preview mode.
It’s not possible to optimize for every screen of every device, but using responsive design and optimizing for the 3 big break points – roughly monitor sized, roughly tablet or landscape phone sized and roughly portrait phone sized, we can ensure that the content will look good on every size and scaling in between.
Hi Shane,
Wow, super insightful and helpful. Just one set back-the cat was a “show stopper” for me. Thank you for the great tips.. m(_ _)m
You’re very welcome!
You don’t like the picture of the charming cat I used? 😀
Ha! Sorry, meant to say, “Stole the show”, in fact, that cat has a long future with doing ‘memes’. Please, if you allow me, “Responsive?! I’m responsive! Just feed me and I’ll respond with a nice nap.” Again, thanks for the teaching a “mindset” when working with Thrive Architect.
Shane! Thank you SO much for this AWESOME post!
It’s this type of in-depth content that will make us all so appreciative of all that Thrive Architect can do and SO thankful that we’re Thrive members!
Keep it coming buddy–in no time you’ll have a band of ninjas creating conversion-optimized websites with such deftness and stealth that their prowess online is unmatched!
Thank you very much, Hans! Very encouraging feedback. 🙂
I like the sound of this conversion ninja army very much. 😀
What a bunch of awesome tips, very useful.
On another note, I love the fact that you (Shane) are still one of the front figures after your company became successful.
Thank you, Kim! I really like creating content and tutorials. In fact, it’s one of my favorite things to do, apart from product design. So, I’m very happy that I have an excellent team in place to manage many aspects of the business, so that I can still do this.
This is solid gold. Thank you Shane! 😀
Thank you, Miguel!
Really great video – well done! It’s clear why it’s called ARCHITECT! 🙂
You mentioned setting the sizes of the headlines H1, H2 etc. – does this have to be done on each page or can this be set globally somewhere?
It can’t be set globally in the plugin (yet). However, there’s a font option called “Inherit theme fonts”. This will simply load the font settings from your theme. And if you change your theme fonts, they will also change everywhere you’ve chosen the “inherit” option.
Very useful guidelines. Thanks a lot.
You’re welcome!
Thanks Shane for the video tutorial. I really like your Architect plugin.
Keep it up.
Thank you! I’m glad you like it.
Brilliant work, thank you so much!
Can I use the Architect on homepage and website header too?
Hello Katrin,
Yes, you can use Thrive Architect to create your homepage, if you set your homepage to a custom page (explained in this tutorial). You can create a header for this page in Thrive Architect, but you can’t edit your theme header separately, using Thrive Architect.
Been a member since day one, it has been a long-time and I’m pleased you didn’t release this as a different product and then asked a higher price tag to purchase the Thrive Architect upgrade plugin.
Your ethical principles, confirms I made the right choice and will continue to be a loyal customer in the future.
Thank you for your comment, Anthony! Thank you for being a long time supporter!
One of your best video tutorials/articles yet Shane. Awesome to see the power of one or two of these tips demonstrated. Really gets the point across. Thanks!
Thank you, Ryan!
Amazingly informative, Shane. Thanks as usual.
You’re very welcome, Fred. 🙂
Great tips! Most of it I already knew, but I see a lot of amateur work (especially with WordPress) so hopefully it will help…
One question though : for padding, for example (and even text) aren’t we supposed to use em instead of px, specially for accessibility?
I don’t think it would be an advantage to use em for padding. If a user is scaling text up in size, then em padding would also scale up in size. As a result, larger text would be crammed into less horizontal space. Doesn’t seem like a good outcome. But maybe I’m missing something? Accessibility is an area I don’t know much about yet.
Your site displays only a large grey area and the menu above the fold on the iPad Pro (newest IOS, all pass up to date)….
Thank you for the heads-up Niels! We’ll check it out and get it fixed. 🙂
Fantastic tips Shane thank you. I’m getting to grips with architect now and loving the mobile view option – knowing the down but not up rule is a gamechanger!
Thank you, Michelle. Great to know that this tutorial was helpful for you. 🙂