Heads up! this post was created when Microthemer was at version 5. The current version is 7.
Some references to the interface may be out of date.
Hi,
I’m a beginner here, so apologies if my questions are frustrating. But I just need a kick in the right direction pls so I don’t waste time learning anything I don’t need in the short term.
I’m using Beaver Builder
My URL is https://solidchildcare.shorttech.site/job_search/
I’d really appreciate some help / directions to tutorials so I can learn myself for.
1. I have the Job title targeted successfully and font changes all work in MT except for the colour change. I have it working for the Salary and Location fields as you can see. But the Job Title should be the green colour as I have that sent in MT but not the blue.
2. I want the heading Location to be centered and salary to be right aligned on large devices and
Job Title
Location | Salary
like above on mobile
Is flexbox the way to achieve this? Is that what I should invest time in figuring out or am I over complicating it?
Thanks millions
1. You have targeted the div with a class “job” for the job title. But there is a link element nested inside this div that has a color setting of it’s own. To override this you must target the link with Microthemer, rather than the parent div element. I would expect this to be possible by precisely clicking on the link text. But if not, click the down arrow to the left of the selector label in targeting mode to shift targeting down from the div element to the link element.
You can learn more about nested HTML elements (like your div and link) on our educational note here: https://themeover.com/a-fluid-header/#nested-elements
And watch the Targeting video which can be found in Microthemer’s help video at the top right of the inteface.
2. Yes, I think flexbox would be a good fit with your requirements. The following tutorial will help you get to grips with flexbox: https://themeover.com/microthemer-flexbox/ (the sample HTML code provided is really useful for experimentation).
I hope that helps. Please let me know if you have any further questions.
Really appreciate your help and I’ve absorbed the flexbox videos… But firstly targetting the link…
There is no option to down arrow on the selector to the lower level. I’m sure I must be being a bit dim, but I just can’t figure it out. Thank you again
Not at all, my description would have been better with a picture. These are the directional controls I was talking about, highlighted in red:
If you could send me access details for the site you’re working on (via our secure contact form) I would be happy to check things are working, and provide a video demo of how to target the link element, for future reference.
Yes, my screenshot was meat to show that I couldn’t target any deeper. Anyway – have messaged you privately on form. Excited to hear back with solutions 🙂
I’ve had look around and made a few changes. Unfortunately I can’t show you what I did via a video because Monika and I are staying in a really remote part of El Hierro with barely any internet. Uploading an image takes aeons so video is out for the next few days. I can however explain what I did (in response to the comments you sent via email):
I saw that you managed to create a selector for the link yourself and make it pink. You were wondering how to target all job links on the page, not just the top one. For that, I did exactly what you did to target the top element, but then chose the alternative targeting suggestion that targets all seven job title links. See the screenshot below.
You had arranged the title, location, and salary using float. So I decided the simplest way to align the text as you wished was to simply set the width of the job title to 50% and the location to 25% with left alignment. Is it looking how you would like now?
I added a few styles to the .summary a selector to make it look more like a button. Perhaps you can customise it further now.
I hope that helps. Please let me know if you have any further questions.
.
