Drop Shadow on Text

Author Posts

gserafy January 12, 2020 at 9:36 pm

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.

At http://www.obgynspecialistsofmacon.com, I added drop shadow and bold to the text for each of the doctors under the Meet Our Doctors (homepage, scroll down to the right) – however, the first Dr (Dr. Harvey Rodenberry) is not showing up with the changes on tablet? This also has occurred with the text Caring for Generations Since 1949 – not this text at the top of the homepage but if you scroll down where it has this text over the blue image of doctors operating. I have it all set on mobile and desktop but cannot figure out what I did wrong for tablet? Thanks.

Sebastian January 13, 2020 at 2:20 pm

Hey,

If you want the drop-shadow to appear at all screen sixes, use the All Devices tab, rather than the Large Desktop tab, which only affects screen sizes at and above 1200px:

@media (min-width: 1200px)

The default Desktop & Tablet tab only affects a lower range:

@media (min-width: 768px) and (max-width: 979px)

So there is an area from 980 to 1199 pixels where the shadow isn’t applied.

Microthemer’s media queries are completely customisable. You can change, add, and remove media query tabs via the Edit media queries screen – see the icon to the left of the tabs. But in this case, you can just set the shadow via All Devices.

gserafy January 13, 2020 at 5:08 pm

Thanks – I am so clueless, I target the area again, it comes up with the number 5 on left corner, I look at my selectors and they all have blue dots – I have started from scratch and used ALL devices but do not know which selector to use – I know I have done something wrong…

Sebastian January 14, 2020 at 2:17 pm

Hey,

If you see a blue number when hovering over an element in targeting mode, rather than a green [+] icon, it means you have already created a selector for the element. In this case, click the blue number to reveal the name of the selector to return to. There may be multiple if you have created lots of duplicate selectors. I recommend deleting all the duplicate selectors (ones with the same name and _2 or _3 etc at the end), leaving only one selector. And then make style adjustments to that one.

The quick start video explains how to relocate existing selectors, so you don’t create duplicates.

Have you reverted back to the way things were since posting your last message? Looking at your MT stylesheet, the shadow is still set on the Large Desktop tab rather than the All Devices tab for the following selector:

General >> Extended column inner heading 1

(the text with a blue background)

Cheers,
Sebastian

gserafy January 15, 2020 at 8:35 am

Such a great product – got it and thank you!

Sebastian January 15, 2020 at 10:52 am

Awesome 🙂

You must login or register to reply to this topic.