Microthemer Responsiveness

Tagged: 

Author Posts

lexya September 22, 2020 at 1:12 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hello,

I am having such trouble with the mobile design of my website. For instance something will look fine in the microthemer mobile version that I have tweaked to make it look amazing but when looking at it on an actual mobile device it looks terrible and everything is off.
One of the things is that there is so much white space to the right of my page when opening in mobile (e.g. http://www.mylaptophome.com/best-laptops-for-writers) and things are way bigger and off-center then they should be.
Please help! Thanks

Sebastian September 24, 2020 at 8:43 am

Hey,

There may be few reasons for this e.g.

1. The mobile you are using has a different screen size to the Phone tab in Microthemer (480px). To see how the site looks on a range of screen sizes drag the top ruler in MT left or right.

2. If you have defined width values in fixed pixel units, the layout of elements might not be ‘fluid’ enough to look good on a range of screen sizes. In which case, try setting width values as using the % unit. Or don’t set the width value at all, but just the max-width value.

Things don’t look too bad on my large iPhone screen (no extra space to the right, things seem centered). Could you point me to a specific heading or another element that doesn’t look right?

Also sorry about the delay, I’ve been having some issue with forum post notifications, which I though I had fixed, but it seems not fully.

Cheers,
Sebastian

lexya September 24, 2020 at 3:29 pm

Hi Sebastian,

thank you for your reply!
Ok yeah my mobile screen seems to be 360px that’s why it looks different.
I was able to figure out some of it but was wondering two things:
1. How do I make the font from the headers automatically adjust to the screen size instead of staying large or instead of me having to go into microthemer and manually change the font size for each screen?
2. The element that is still not working is the amazon buy button underneath the picture and the specs of each laptop – it keeps floating way too far to the right when on iphone screen. How do I make it so that it’s centered? I’ve tried everything with position and layout and dimensions and nothing seems to work right.

Thanks for your help!
Best,
Anja

Sebastian September 25, 2020 at 12:56 pm

Hey Anja,

1. You can set the font-size using the vw unit to make it relative to the viewport width e.g.

font-size: 10vw

That makes the font size 10% of the width of the viewport.

You could also use clamp to specify a min and max size e.g.

font-size: clamp(1rem, 10vw, 4rem)

2. The button displays fine for me when I view the site at 360px in Chrome’s dev tools. I wonder if the text is affecting the layout for you. Does it help if you make the font-size smaller?

Thanks,
Sebastian

lexya September 26, 2020 at 1:48 am

Hi Sebastian,

thank you for the help! I figured it out and adjusted it accordingly.
Can I do the same vw for line-height?
Also one thing that just changed that never happened before is that when I go into microthemer it used to only show me all of the changes I made for the website page I was currently on, but now it shows me all the changes for all the websites…can that be changed to go back to just showing the page I am currently working on?
Thanks for your help!
Best,
Anja

Sebastian September 26, 2020 at 9:07 am

Hey Anja,

The history should not combine between different sites. Would you mind sending me access to both sites via our secure contact form so I can review your WP setup and fix this for you?

Thanks,
Sebastian

Sebastian September 26, 2020 at 10:07 am

And yes, you can use the vw unit in any field that has a unit menu (see to the right of the slider that appears at the top of the dropdown menu)

lexya September 26, 2020 at 12:16 pm

Oh sorry I think I may have misspoken. History not between different sites but different pages within the same website. So when I’m working on one post it shows me the history of that post but also the other ones I used microthemer on which was not like that before.

Sebastian September 26, 2020 at 1:35 pm

Ah OK, that makes more sense. Actually, MT has always had one history for all actions, not separated for each page.

Not sure if this is relevant, but you can increase the number of revisions MT stores via General > Preferences. The default is 50, the maximum is 300.

Cheers,
Sebastian

lexya September 26, 2020 at 1:47 pm

Oh ok that’s weird cuz before what happened was that when I went to one post and changed things in MT it only showed me in the selectors tab what I had done for that post. Then when I would go to another post it only showed me what I had changed through MT on that post. Now all of a sudden it is all combined so I’ve got a huge list. If I change or delete that selector from another post it doesn’t act as a “history” but it actually deletes what I had done to the post. Is that normal?
Like I had previously exported things I had done to a post and then imported it to a new post but now it seems to not need that anymore since all the selectors are there.
If you’ve got a great documentation or video I could read up on that since I may have understood it wrong, that would be great.

Sebastian September 28, 2020 at 10:08 am

Oh I think we might be talking about different features. The history feature I was talking about can be accessed via

History > Restore revision

The selectors menu (at the top left) shows all of the selectors you have created in Microthemer. They are added to a folder called ‘General‘ by default. The maximum number of selectors per folder is 40 (which is necessary for performance reasons). If you exceed 40, a new folder is created automatically – General _2, General _3 etc.

But it’s best to organise selectors into folders that you give custom names to. You can drag and drop selectors into different folders by hovering over the icon to the left of the selector. And you can rename, and reorder folders too. So with this system, you can drag selectors that target a specific post into a dedicated folder. And that is a recommended way to organise your selectors.

Does that make sense?

Thanks,
Sebastian

You must login or register to reply to this topic.