-
AuthorPosts
-
December 12, 2018 at 10:12 pm #1044524
Hello everyone
If I’m online like this: <h3>TEXT TEXT</h3>who I can specify that it will mobile the text smaller or in a different color.
<h3>TEXT TEXT</h3> Is mobile <h5>TEXT TEXT</h5>Thanks in advance
Beautiful greetings
FranzDecember 13, 2018 at 1:21 am #1044645Hey Franz,
You can add class to those heading tags and use Quick CSS (located in Enfold > General Styling), to make changes on their color and sizes.
Hope this helps.Best regards,
NikkoDecember 13, 2018 at 9:58 am #1044768This reply has been marked as private.December 14, 2018 at 6:48 am #1045146Hi Franz,
Please try something like this:
Markup:
<h3 class="my-class">TEXT TEXT</h3>
CSS:
@media only screen and (max-width: 767px) { .my-class { font-size:12px; } }
Best regards,
RikardDecember 15, 2018 at 11:11 am #1045617This reply has been marked as private.December 16, 2018 at 5:15 pm #1045978Hi Franz,
You have mentioned in example that you have those markup:
<h3>TEXT TEXT</h3>
we assume you are using Text Block. If we misunderstood it please let us know, maybe you can give us a screenshot where you put it to give us the context.
Best regards,
NikkoDecember 16, 2018 at 5:26 pm #1045980If you want to replace it globlay and not on a specific h tag:
by the way – you definitly want to change the h-tag from h3 to h5
or do you only want to change the size in mobile devices ?
And do you like to have it definitly only for mobile devices or for smaller screens too?The reason why i asked this is that on mobile devices the enfold adds to the html tag a class called: avia_mobile
so if you like to influence only the mobile version of a tag you can always do it via this class infront of the needed rule f.e..avia_mobile h3 { font-size: 24px !important }
if you want the tags to be different you have to do it via child-theme functions.php
you can use this nice replace tag with tag function and an if clause –function replace_tags_with_tags(){ if(wp_is_mobile()){ ?> <script> (function($) { function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); } replaceElementTag('h3', '<h5></h5>'); // you can add here more lines like this semicolon separated }(jQuery)); </script> <?php } } add_action('wp_footer', 'replace_tags_with_tags');
December 16, 2018 at 5:51 pm #1045986Thank you very much so it fits great
Beautiful greetings
FranzDecember 17, 2018 at 5:31 am #1046145Hallo Franz,
Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.
Thanks @guenni007 for helping out :-)
Best regards,
RikardMarch 10, 2019 at 5:36 pm #1077047Vielen Dank
Diese Anfrage können Sie schliessen.Schöne Grüsse Franz
March 10, 2019 at 10:28 pm #1077143Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Title mobil smaller’ is closed to new replies.