Are there compatibility problems between Microthemer and Bootstrap?

Author Posts

Sozen

First off, I am a total noob in CSS. I bought Microthemer (MT) because I was hopeless at CSS.

But here’s the problem – I am using Microthemer on a development Ultimatum theme which I built from scratch.

The header CSS was adjusted multiple times using MT until it looks rather ok about 80%, but 2 changes I did, have not registered on my mobile phone (only on desktop).

1) The Site title (in Ultimatum we call it the logo) fonts cannot seem to change on my mobile. I tried several kinds of fonts. On desktop, I can see the changes clearly. I don’t know why.
2) After I moved the div container for the site title and tagline, the Site title has become unclickable on mobile phone. Again, only on mobile phone. But it’s totally fine on desktop. I use Opera browser, but I tried with Chrome and Cheetah browsers – same thing.

I have no idea why. I am starting to be a bit wary of using Microthemer, because it seems to have some kind of effect on my mobile and BEFORE I used MT (just hand coding), everything was ok. The site title was clickable, and the fonts could be changed. But on desktop, everything looks fine….and still looks fine.

It’s the degrading performance on mobile that has me concerned. Maybe too many selectors, etc….has messed up the browser or mobile rendition in some way? It’s very weird.


Sozen

Ok, sorry, correction – the problems are mostly happening on Opera. Only the fonts not being able to change issue is happening on ALL browsers.

On Chrome, the site name is clickable, but the fonts still look unchanged, even though I installed that particular font (.ttf) on my phone.

So, mostly an Opera problem (off road mode enabled)…. I think Opera has some significant redundancy issues. Case can be closed, I guess.


Sozen

I am starting a new thread, as it’s become apparent to me that different mobile browser rendering can lead to totally different results, and may lead one to think it’s a CSS issue.

How do you deal with different browsers showing your website differently? For example, on Opera, all the repositioning on Microthemer shows up, even the container/div resizing. But Opera has significant redundancy issues, which happen even though you clear the cache, and use Off Road Mode. For example, responsive images turn non responsive on Opera, after some CSS edits on Microthemer.

But, on Chrome, the images are still responsive. However, the respositioning of the header Logo/Sitename/tagline does not appear on Chrome.

All these quirks are making it very hard to know whether I am on the right track or not.

It’s a very significant issue in my experience….


Abland

Hi, Sozen,

It’s frustrating, I agree. And difficult to please every browser. In my case I use Screenfly and so far it seems sufficient.
http://quirktools.com/screenfly/

I review sites using their tool, adjusting where needed, and clients have not reported any problems as yet.


Sebastian

Hey,

Thanks for sharing you problems, I will merge the three different topics you created about using Microthemer to style for different browsers and devices and compatibility with bootstrap because I think my answers may relate to all of them.

Cheers,

Sebastian


Sebastian

I think it would help a lot if you could post a link to the site you’re working on so that I can address each issue in concrete terms.

In the meantime, here are my initial thoughts:

  1. Microthemer and Bootstrap are not incompatible. The CSS Microthemer generates isn’t ‘special’ compared to the CSS you could write by hand. I believe I can help you get them to work together.
  2. It’s likely that the issues you’ve noticed with your styles not displaying on mobile is caused by mobile specific styles in Ultimatum overriding the (non-device specific) styles you specify in Microthemer. The solution is probably to define some mobile specific styles yourself using Microthemer’s device specific tabs.

I will confirm all of this once you’ve posted a link to your site.

Cheers,
Sebastian

ps overcoming the different ways in which browsers and devices render CSS styles is probably the hardest thing about designing websites. It understandable that newbies find it hard. But I’m here to help you whenever you get stuck.


Sozen

Thanks Sebastian for the fast response.

I have provided my link via email to you, but would rather not share it openly on the public forum. I want to make it clear that I do want (or rather I need) to continue using Microthemer and therefore was considering scrapping my entire theme and starting afresh, LOL. Microthemer has proven essential for editing CSS for me….

If you need WP login details, I can provide them via email. If we determine the fix and it is not a difficult one to resolve, you can share it here so everyone can learn.

Thanks again.


Sebastian

Hey,

Thanks for sending me the link to your site.

1. I noticed that the Bookman Old Style font you were trying to use wasn’t rendering on my iPhone either. Bookman Old Style used to be on the ‘web safe’ fonts list. But perhaps that list is a bit redundant with regards to modern mobile phone browsers. I tried setting a Google Font (Sacramento) and that seems to work on my mobile. Google fonts embed the actual font file in the web page which probably makes them more reliable to use.

2. The reason the site title isn’t clickable on mobile is that another div with the ID ‘col-18-2’ is occupying exactly the same space as the site title link. It doesn’t have any content in it so it’s invisible. I discovered it by inspecting the HTML of the page with firebug. You could locate and delete this div. But I’ve managed to overcome the problem by setting the z-index of your ‘Logo container’ selector to 999. This makes it sit in front of the invisible div instead of behind it.

I can explain things further tomorrow if you like, right now it’s approaching bed time in my time zone!

Cheers,

Sebastian


Sozen

Thanks Sebastian, for the explanation on the 2 points.

1) I liked the Bookman Old Style fonts, but I don’t know why I can’t see it on my phone. But a friend said he could see it on his phone, so….that’s weird.

2) About the div col-18-2, yes I did notice it, but I did not know if it served any function or not. Another tool I use on my Firefox to scan CSS elements, is CSS Viewer (a Firefox plugin). Also, Firebug is good, but too complex for me.

I hope you can get to the bottom of the issue because I really need Microthemer, and would rather scrap the theme and try to start from scratch (minus bootstrap) if the issues cannot be solved.

You must login or register to reply to this topic.