Make Text Responsive to iPad

This topic contains 9 replies, has 2 voices, and was last updated by  Sebastian 2 months, 2 weeks ago.

Author Posts

gserafy

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.


Sebastian

Hey,

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.

Please let me know how you get on.

Cheers!
Sebastian


gserafy

Thanks – I think I targeted it and have……

Then have in styles window…….

video {
margin: 0px;
padding: 0px;
border: 0px;
font: inherit;
vertical-align: baseline;
}

But then have in Additional CSS in WP admin….

@media (max-width: 959px) { .responsive-layout header.main-header .logo-wrapper .mobile-logo-additions .vamtam-cart-dropdown-link { display: none !important; }}

Do you know where I would put what you suggested? Thanks.


Sebastian

Hey,

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.

Thanks,
Sebastian


gserafy

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.


Sebastian

Hey,

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.

Cheers,
Sebastian


gserafy

I came close – fixed the mobile landscape issue but now it doesn’t show up on iPad??


Sebastian

Hey,

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?

Cheers,
Sebastian


gserafy

Yes, that fixes it!

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!


Sebastian

Ah brilliant!

You must login or register to reply to this topic.