Category: RDaily

I just fixed the way my website looked on mobile.

Even though I don’t recommend the thrive themes’ themes, I started this website long before I learnt that. So naturally I went with the theme I liked best – Minus. I love the minimal look which puts all focus on the content. But I’ve always hated the way it looked on mobile – too narrow, too much spacing on left and right, the top text logo part alignment looked broken

Try your website on mobile too, especially the non-thrive-architect content pages.

Anyways I fixed it with a bunch of CSS and spending quite a bit of time. I think the result though minimal, is worth it and gives a better experience for mobile readers.

Below is the image showing the change and the CSS I used to fix it.

CSS to fix it

/* mobile fix for header*/


@media only screen and (max-width: 540px)
{
.wrp {
width: auto;
padding: 0px 25px;
text-align: left;
}

@media only screen and (max-width: 540px)
{
.wrp .bpd {
width: auto;
}


@media only screen and (max-width: 380px)
{
.wrp {
width: auto;
padding: 0 25px;
text-align: left;
}

@media only screen and (max-width: 380px)
{
.wrp .bpd {
width: auto;
}

@media only screen and (max-width: 380px)
{
header #logo, header #text_logo {
margin-left: 0;
}

@media only screen and (max-width: 380px)
{
header .hmn {
margin-right: 0px;
margin-top: 10px;
}

How to Use

Paste the code inside Thrive Dashboard > Theme options > Style and Layout settings > Custom CSS

Word of Warning

This isn’t the most important thing to focus on if your website is new and you are still validating your funnel/products. I have been running this site without this optimisation for long time and I still managed to gather readers/email subscribers. This can be part of improving after all important basic work is done.

Additional Tip

The above screenshots were taken in Chrome. Did you know you can mobile preview any website in Chrome?

1. You just have to right-click on any page first.
2. Select “Inspect”
3. In the new Inspector window that opened up, click on the tiny icon on the top-left (screenshot below)

Beginners will avoid 90% of mistakes that mess-up their new thrive architect page design… if they use this checklist.

Also aesthetically, it will prevent you from making your visuals amateur.

1. Are you creating page sections to hold every content on your page?
2. Is your page section properly sized (max 1.5x your screen height, unless in special cases you can go up to 3x).
3. Are you setting up a default left/right padding for every page section you create? (min. 15px recommended) This will save 80% of mobile optimising time.
4. Don’t use the colour control on the text directly as much as possible. Set them globally for the page in the landing page text settings (only once for H1 to H6, text and links). Then use the H1-H6 for various text you want.
5. When you use max-width setting under layout and positioning, make sure it’s not in % mode accidentally. If you need % mode instead of PX mode, make sure you think about how it will look when you move it inside another container, or how it might look in mobile screen.
6. When using anything that allows you options in % mode or PX mode, make sure it is not  in % mode by accident. Think about what % mode means in various screen sizes and parent containers.
7. Use the Alignment setting under layout and positioning for anything other than text.
8. Don’t overuse bold, underline and italic set for individual text elements (a common mistake – overusing this takes away the importance/functionality of bold/italics and creates irritation for the readers).
9. Don’t tweak individual text font-size, line height and letter spacing, unless its absolutely essential. Control them from global landing page text settings only in most cases. This will also avoid making your page look amateur.
10. Don’t use custom self-hosted videos in TA video control unless it perfect 16:9 ratio. (They might fix this in the future)
11. Don’t over-do the text shadow effect. Unless its globally setup.

I might release a part 2 of this checklist. Ask me if you need explanations for any of the points above.

This shouldn’t come as a surprise to anyone who has done their research. Thrive themes’ themes suck.

Its hard to customise – even for basic stuff like fonts, colors, spacing. Its just bad aesthetics. But doesn’t mean its bad for conversions and for validating your ideas. But the good news is that they are making a theme builder using which you can make all type of themes.

But… I wouldn’t advice using it at least 6-8 weeks after the initial launch as I’ve always advised. (refer my thrive themes’ plugins update policy advice)

So what themes do I recommend to be used with thrive plugins – even major plugins like Thrive architect, leads and ultimatum.

Here is the list

• Genesis child themes from StudioPress
• Building genesis child themes with Dynamik Website Builder on genesis framework (This isn’t the cheap choice, but I use and prefer this)
• GeneratePress themes
• Astra themes

The list is based on opinions collected from facebook groups of thrive themes users who are happy with this setup.