I have a text header at obgynspecialistsofmacon.com but it gets cut off on iPad – I looked at the tutorials but wanted to see if someone could give me some simple steps to make the text responsive on all screens? Thanks.
If you target the text in the header and set the max-width property to 100% it will shrink to the width of its container element rather than overflow out of it.
To clarify, I was suggesting targeting the text you referenced (which is actually an image of course) by clicking on the image and then clicking the CREATE SELECTOR button in Microthemer. Looking at the HTML I would expect it to create a selector that is something like this:
#phone-num img
So with the new max-width value the full selector would be:
#phone-num img {
max-width:100%;
}
I’m not sure where on the page your video selector is… And do you mean you’re looking at Microthemer’s Styles tab with the advanced targeting options expanded? If so, that tab is just to give you information about existing styles affecting the element you have selected. You must create a selector and then apply new styles via the Microthemer fields.
If you would like me to explain myself by example, feel free to send access details for the site you’re working on via our secure contact form.
Worked perfectly – thanks! If you had another moment, is there a way to make that image look better on mobile, maybe even delete it just on mobile? Maybe this is in my theme rather than Microthemer but thought I would give it a try.
Absolutely. Now that you’ve created a selector for the image, go to the Phone tab and set display:none via the Behaviour property group. That will hide the image on screen sizes below 480px. If you want, you can edit this 480 number using the Edit media queries icon to the left of the responsive tabs.
Looking at the HTML used to animate the text, I can see that it is being hidden by the plugin that controls the animation – not because of anything you’ve done in Microthemer. A class is being dynamically added to the HTML in order to hide the content:
tp-hidden-caption
Does the plugin you used to create the animated text have some configuration options for choosing if the text should or shouldn’t be hidden?
There is a hide under certain width feature in Slider Revolution and I had that set to 1200 – changed to to 800 and that seems to work and I do not have that issue on mobile landscape….thanks!
.
