Hi,
Add this to quick css:
#avia-timeline-1{
margin: auto;
width: 50%;
padding: 10px;
}
.av-special-heading.av-special-heading-h2 h2 {
font-size:50px!important;
}
Best regards,
Jordan Shannon
Hello,
Could you please provide a quick CSS to center the timeline element in the middle of the page. Right now that option is only available if I select alternate milestone placement.
Also, please provide a quick CSS to change the font size of the title. Right now the system reverts to default if I change it.
Thank you!
Hi Rikard,
I am having the same problem again. It happened now twice after I made a change in Enfold. This time I changed the font size via quick CSS and when I update the page I get the error message on top of the page.
Please advise,
kind regards,
Julia
Hi ellamac,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) {
.availtext.avia_textblock h3 {
font-size: 12px !important;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
-
This reply was modified 5 years, 9 months ago by
Victoria.
Hi CharlieTh,
Yes, of course, you can use media queries to limit the container width and make the font-size smaller but we tried these with your setup and it did not give the desired result.
Best regards,
Victoria
-
This reply was modified 5 years, 9 months ago by
Victoria.
Hey Frank,
You can define smaller font-sizes for the elements that you need using a media query like this one:
@media only screen and (max-width: 989px) {
#top #wrap_all .all_colors h1 {
font-size: 30px;
}
#top #wrap_all .all_colors h2 {
font-size: 24px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria,
thanks for your feedback. I had to find a solution to both points as my customer wanted the website to be published. It’s quite disappointing to me (and my customer) that we had to delete the visible captions of the masonry gallery as it did not look nice on smaller screens. Now they are just visible as small captions in the popup picture. You can have a look at it in the link I sent in the private content area.
Could you maybe add the possible option of setting an individual font size in galleries?
For the slider: I had to delete the slides 2-3, and reduce the buttons to just 2 ones in the first slide. By setting this we just have one animation left on the home slider. Do you think that adding an individual amount of buttons inside the slider is realistic in the future theme? Or even an individual option of animating the texts for the sliders -> no text animation, just “appearing with the next slide”?
As I do not need support at the moment, these points might be a great development/adjustment of the theme (for future projects) ;o)
All the best, Sabrina
Hi,
Sorry for the late reply, to change the font size of h1 on mobile, I looked at your page and the heading “Innovations Management Software”, for this structure please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
@media only screen and (max-width: 767px) {
.avia_textblock h1 {
font-size: 24px !important;
}
}
adjust the font size to suit.
After applying the css, Please clear your browser cache and check.
Best regards,
Mike
Hey wrightella1,
Sorry for the late reply, you can modify the image sizes in the /enfold/functions.php file, starting at line 166.
After making your changes you will have to Regenerate Thumbnails.
For your burger menu font sizes, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
@media only screen and (max-width: 990px) {
#top #wrap_all #av-burger-menu-ul span.avia-menu-text,#top #wrap_all #av-burger-menu-ul li {
font-size: 16.5px !important;
}
}
After applying the css, Please clear your browser cache and check.
Best regards,
Mike
Hey Sigmund,
Here are the shortcodes for the page, of course, images will be missing but the general layout should work:
[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-shadow' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='' color='main_color' custom_bg='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2017/02/banner-news-alt.jpg' attachment='1057' attachment_size='full' attach='scroll' position='top center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#000000' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-151tuo']
[av_heading heading='Latest News<br/>Everything thats going on at Enfold is collected here' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='0' color='custom-color-heading' custom_font='#ffffff' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-wtxug'][/av_heading]
[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-teydk']
[av_textblock size='' font_color='custom' color='#dddddd' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-m9huw']
<p style="text-align: center;">Hey there! We are Enfold and we make really beautiful and amazing stuff.
This can be used to describe what you do, how you do it, & who you do it for.</p>
[/av_textblock]
[/av_section]
[av_blog blog_type='posts' link='category' blog_style='single-big' columns='3' contents='excerpt' content_length='content' preview_mode='auto' image_size='portfolio' items='1' offset='no_duplicates' paginate='no' conditional='is_subpage' av_uid='av-dpk7k']
[av_blog blog_type='posts' link='category' blog_style='blog-grid' columns='2' contents='excerpt' content_length='content' preview_mode='auto' image_size='portfolio' items='6' offset='no_duplicates' paginate='yes' av_uid='av-8sew8']
Best regards,
Victoria
How can I remove the padding at the top of my H4 fonts? It creates too much of a gap between the preceding line and the H4 line. I’ve customized H4 to use the Playfair Display font, so you can see the first thing on the Home page where there is a huge gap above the H4, as well as in the three areas midway down the page.
Also, in the Image element, it won’t allow me to specify a heading, only the font size. I set the H3 font to be Open Sans Condensed and want that to show in the Image element but don’t know how to do that.
Hey kodacurrie,
Please try the following in Quick CSS under Enfold->General Styling:
.av-alb-blogposts .entry-title {
font-size: 18px;
}
Best regards,
Rikard
Hi,
Thanks for that. I change the default font size to 16 pixels under Enfold->General Styling->Fonts. Please review your site.
Best regards,
Rikard
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.html_modern-blog .avia-content-slider .slide-entry-title {
font-size: 1em;
word-break: break-word;
}
}
Best regards,
Rikard
Hello Support,
I’m having some trouble with changing the font size of a text block for mobile only.
The font size option in the text block (Font Size for very small screens (smaller than 479px – eg: Smartphone Portrait)) does not seem to be working for me.
I’ve tried quite a few options in the forum including the following Custom CSS Class;
@media only screen and (max-width: 767px) {
.availtext .avia_textblock {
font-size: 12px !important;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
}
What I’m trying to achieve is for the text ‘Next Availability: 18 June 2020’ to be displayed on a single line above the button on the mobile view only.
Any help would be greatly appreciated!
Many thansks.
Hi there, I have a few old posts that use the classic editor and I would like to increase the default photo caption size and get rid of italics and make bold… I used stylebot and it came up with this css:
p.wp-caption-text {
font-size: 20px;
font-style: normal;
font-weight: bold;
}
however that did not work…. any suggestions?
Example of post with small italic captions:
https://www.thomashenthorne.com/moving-to-marin/
Thanks!
Rob
Hi,
I’d like to change my page setup for mobiles and tablets : the font size and images sizes. It’s too high. I don’t know where it is….
thanks for your help
best regards
komleprenomGuest
Hi,
I’d like to change my page setup for mobiles and tablets : the font size and images sizes. It’s too high. I don’t know where it is….
thanks for your help
best regards
Is there a way to change the size of the title of my blog post?
Hi,
We can help adjust the font size of the icon font, but we will need to see it to help, can you make a test page visible with it?
Also, please add the bullet point section to the test page so we can investigate.
Best regards,
Mike
Hi,
Thank you for the update.
We forgot to add the class attribute to the link tag. Please try to use this one instead.
<div class="avia-button-wrap avia-button-center avia-builder-el-52 el_after_av_codeblock avia-builder-el-last ">
<a onclick="Calendly.initPopupWidget({url: 'https://calendly.com/mattias-aggeler/demo-penumbra-en'});return false;" href="" class="avia-button enavia-icon_select-yes-left-icon avia-color-theme-color avia-size-small avia-position-cter">
<span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
<span class="avia_iconbox_title">Schedule a demo</span>
</a></div>
Best regards,
Ismael
I went to select a custom font size for the “Special Heading” option (where the option is provided to make a font size big for desktop, and small for phone). But the option isn’t there. I’ve looked within Theme Options in case there is a switch to turn on, but couldn’t find anything.
Thank you so much @Guenni007! :)
I opted for adding a drop shadow to the two images with PixelmatorPro (the software I use for images), as it’s a bit too hard for me as a non developer to understand how to transform the two images into the right fonts in a header (the second one being a logo, so harded to reproduce as a font).
Last question and then I’m done, how do I add the drop shadow instead of the 1px border around the “7th Edition Online…” header, so it creates a similar effect to that of the images? As you can see, I added the code provided by k358 above to the header, then changed the shadow size from 2px to 1px, but it looks still quite sharp instead of looking more as a shadow like in the two images above and below it.
Thank you again for all your help.
Antonio
Hi wasim-ullah,
Can you try to go to Enfold > Advanced Styling.
Under Select an element to customize, please choose body and click on the Edit Element button.
Then set the font size to 16px.
Hope this helps.
Best regards,
Nikko
Hi Yigit
thanks for your help. The site is now live. https://www.phxbookkeeping.com/
The CSS did not help much. Do you see how tiny it gets when you scroll up? I’d rather just have it get to the size it is when the font turns black.
Also is it possible to make it shrink so it aligns to the left and not jump to the left?
Thanks so much
Tina
Hi williamslyd,
Well, there is no one place where that css is written, there are different styles for different Advanced Layout Builder elements and so the global settings for headings and p can be redefined by that css. You can write your own css that will rule the font sizes for the elements that you need.
Best regards,
Victoria
Hi Jordan,
Font size of sales-funnel blog is the one I want to use.
I fixed the problem with font by adding:
#top .av_inherit_color * {
font-size: initial;
}
How can i find the problem with the missing “button link ” in promo box?
Thank you,
Two pages as shown in private content have different fonts sizes of its body, although they have been assigned same font size from the theme settings.
Hi Victoria, Thanks for the tip. I got it working. On a related question, I have also set up a class that has specific font size, family, weight etc. However I can’t figure out after searching, how to use the sane class name but have a different version it apply to mobile so I don’t have to duplicate all the content to apply a mobile version of that class. Any suggestion on how this could be done? Thanks