Thanks, this works well on the single blog post post.
But the archive and the category page still shows the date to the left instead of centered.
Also, the font size on a single post page is really big – much bigger than the rest of the font, which is set to 15px.
So I tried the following: I reduced the font in the GENERAL STYLING section to 13px, but then the body font reduces 2px as well. Even if I set the <body> to 15px in extended styling, it remains smaller. Is there a way around to reduce JUST the font size of a single blog post?
Thanks so much!
Thanks Mike, your code works:
.cart_dropdown_link > span:first-child {
font-size: 30px !important;
}
But it’s so strange – both codes are the same (excluding the value) but this doesn’t works.
.cart_dropdown_link > span:first-child {
font-size: 50px !important;
}
Hello, I bought the Enfold theme, I’m making the changes, but as soon as I change a color or font size, I don’t see any changes when I refresh the page.
I installed the Coming Soon demo, is that why it doesn’t works?
From the dashboard, I have access to the blank home page (and not the Coming Soon page, I made the settings for). Is it a bug? How can I fix this problem?
Thank you in advance for your answer :)
Hey,
I have a problem with the progress bar I am using at this page:
marcogiannecchini.de
At the desktop view everything is fine, but when I look on mobile it looks like this
https://ibb.co/W2YJwj2
I tried to make the margins bigger with this code and specific class for the 2nd mobile version of the progress bar
.avia-progress-bar-mobile {
margin-bottom: 20px!important;
}
It is more readable then but it doesn’t look good at all.
How can I make it look nice at mobile. The problem obviously is because in mobile in 2 bars the text is too long for a single line. So there are 2 bars that are in 2 lines. How can I make sure that there is the same margin between the bars even though there are bars with one line and bars with two lines?
How would you solve that so that it looks good?
Best regards,
Tobi
Short Update: I changed the font size in mobile to very small so that there are only bars with one line, so that it is readable. It’s not elegant, so I hope you have a good suggestion what to do :-)
Hey,
Thanks for contacting us!
It seems like you have not registered to our support forum. Please do so here – https://kriesi.at/support/register/ using your purchase code. After logging in, you can go to Enfold sub forum to start new threads whenever you have a question or an issue :)
Please add following code to Quick CSS in Enfold theme options > General Styling
#top #wrap_all .av-magazine .av-magazine-content-wrap h3.av-magazine-title {
font-size: 14px;
}
Best regards,
Yigit
Hi mela1989,
Please try using this code instead:
.home .avia-builder-el-8 .slide-entry h3 a {
font-size:35px;
}
Best regards,
Victoria
This is what I did, the problem is when you increase the font size of the slider on the top, it is also increase the post slider on the end of the page.
Hi Niklas,
Did you make sure to delete the old CSS and JS files under Enfold->Performance before checking? You could try this CSS as well:
.page-id-1342 .iconlist_content p span {
font-size:16px !important;
}
Best regards,
Rikard
Hey robsdesigns,
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
#footer .widgettitle {
font-size: 12px;
}
#footer .textwidget p a {
font-size: 11px;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
I took another look at your site and found the css to be working, to demonstrate I changed the top gray bar and phone number to 60px
#header_meta {
min-height: 60px !important;
}
#header_meta .phone-info {
line-height: 60px !important;
font-size: 60px !important;
}
Please see the screenshot in Private Content area.
Please adjust to suit, and Then clear your browser cache and any cache plugin, and check.
I also adjusted your phone number in Enfold Theme Options > Header > Extra Elements > Phone Number or small info text so it is a link, please check.
You can also add more text there if you wish.
Best regards,
Mike
Hello Rikard,
thank you for the reply. That doesn’t work for me. I added the code to my custom-css, cleared the cache several times and the font-size doesn’t change (I put in 32px to test it).
Best regards,
Niklas
Hi Niklas,
Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:
.page-id-1342 .iconlist_content p {
font-size:16px !important;
}
Best regards,
Rikard
Hi,
Sorry for the late reply. I added this CSS to the top of you Quick CSS and it’s working and applying to your site, please review it:
.home .slide-entry h3 a {
font-size:35px;
}
Best regards,
Rikard
Hi,
I was hoping someone can give me the code that I can add into my Quick CSS section to make the font sizes smaller in the footer.
I have 4 footer columns with text links in each column. I would want the header of each column to appear smaller as well as the links in each column.
Can someone help?
Hi,
Add this to quick css:
.avia-menu a span.avia-menu-text{
font-size:15px;!important;
}
Best regards,
Jordan Shannon
Hi Jordan, that works. One more question on the menu. Is there a way to make the font size larger just for the menu items?
First: why an updated version? it still works on Enfold 4.5.7 and WP 5.2.1
you can influence it same as the top navigation area with quick css:
#top .socialbookmarks-widget .social_bookmarks {
display: inline;
}
#top .socialbookmarks-widget .social_bookmarks li {
border-right-width: 0;
width: 50px;
}
#top .socialbookmarks-widget .social_bookmarks li a {
width: 50px;
line-height: 50px;
min-height: 50px;
}
#top .socialbookmarks-widget .social_bookmarks li a:before{
font-size:30px
}
Result with 50px : https://webers-testseite.de/#footer
That widget area in the middle: Social Bookmarks Widget
-
This reply was modified 6 years, 10 months ago by
Guenni007.
Hi,
Sorry for the delay.
1-2.) Use this css code to adjust the height of the top bar.
#header_meta {
min-height: 60px;
}
You may need to adjust the line height of the elements inside that container as well.
#header_meta .phone-info {
line-height: 60px;
font-size: 18px;
}
That code also increases the font size of the phone number.
3.) It’s possible to add a widget inside the header.
// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
If you want to put the widget in the top bar, replace the “ava_after_main_menu” with “avia_meta_header” hook.
4-5.) The following article should help:
// https://css-tricks.com/the-current-state-of-telephone-links/
We don’t usually entertain multiple questions in a single thread because it makes it quite confusing for other users who may be looking for the same answer. Please open a single thread for each of your inquiry next time. Thank you for understanding.
Best regards,
Ismael
Yes, I’m sorry for the little context!
So, I’ve created an icon list and I would like to change the fontsize of the content-field (not sure, if that is the right word). Here is the screenshot: https://beyond-limitation.com/screenshot/ (I’ve given the login/pass in private). In the ALB I can set the font size, but there is 14 and the next is 18, I’d like to have a size in between.
That’s why I had the idea of giving the icon-list a custom css. I don’t want to change the font size of all icon-lists, just of the one on that specific page (https://beyond-limitation.com/work-with-me/)
I hope, it got clearer now.
I’ve sent all necessary information via private.
Thank you again!
Niklas
hi,
Thanks for your answer, but unfortunately this is not the solution for my problem. I’m trying to be more specific:
1. i have a Deskop-Version: The Masonry Gallery is ok for me
2. i added a second Gallery shown on mobile Devices. Now i lke to hide the Color overlay on the mobile version and use a smaller font size oft the second Masonry. I Would like to change only the second Gallery for mobile devices.
thanks for your help in advance
best regards,
Oliver
update:
for the font size i use this solution: https://kriesi.at/support/topic/masonry-gallery-font-size/ but i like to have different sizes for the desktop and the mobile version. Can i solve it with the Section-id?
-
This reply was modified 6 years, 10 months ago by
ollie08.
I added the following:
@media only screen and (max-width: 767px) {
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 200;
font-size: 23px;
}}
But this gives me too much space on top and bottom – you might want to take a look.
COULD YOU LET ME KNOW THE CODE IF I DON’T WANT TO SHOW IT ON SMARTPHONES AT ALL?
ALSO: I still don’t have a solution that the font is not showing in font-weight 200 but fat.
On Desktop: On my startpage it looks fine, but on all subpages the font is fatter and not 200. I set all the proper settings in h1 extended styling, but it always gives me 2 different options. I want it to look like on my startpage – on ALL PAGES, slim, not fat!
On Mobile: the font doesn’t appear to be slim either!
I added some CSS to another website to make some adjustments for a temporary fix. But as I stated, the same layout works on pages fine. Also, the responsive adjustment of the title font size using the Avia builder doesn’t seem to work either.
Hello Kriesi Support Team
For some reason my mobile css doesn’t seem to work on mobile. I tried all kinds of different options and now went up to 1080px to cover iphone 7Plus etc. But it’s not reading it. Would you be able to help?
The code I am using is:
@media only screen and (max-width: 1080px) {
.about p {
font-size: 0.8em!important;
line-height: 0.8em!important;
}
}
Dear Enfold team,
We are having problems in trying to change the font size of the main menu sub-level titles so they will appear smaller than the main menu title.
We have played around with the advance styling to make the ‘main menu links’ font size to 21px and ‘main menu sub-level links’ font size to 15px,
but nothing happens. ( we have cleared cache).
We copied another enfold working website child theme to work from. Here is the relevant current custom CSS one can see related to the main menu color/ font etc:
.header_color .main_menu ul > li:hover > a .avia-menu-text,
.header_color .main_menu ul > li > a:hover .avia-menu-text {
color: #C55A11 !important;
}
/* Main menu subtext */
.header_color .main_menu ul > li > a .avia-menu-text,
.header_color .main_menu ul > li > a .avia-menu-subtext {
font-size: 18px !important;
}
Any advice would be most welcome.
Thanks
Hi,
Thank you for using Enfold.
1.) Set the Enfold > Blog Layout > Blog Layout to “Use the advance layout builder (ALB)…” so that you can manually edit the blog page using the ALB. You can add a special heading element on top of the blog posts element.
2.) Use this css code to adjust the style of the post categories.
.html_modern-blog #top .post-entry .blog-categories {
text-align: left;
top: -25px;
font-size: 14px;
font-weight: 700;
}
Best regards,
Ismael
Hi,
Thank you for writing to us.
Please check the documentation for customization code :)
To change the font size using CSS you can add the font size property to the CSS selectors:
font-size: 30px;
Let us know if you have any questions.
Best regards,
Vinay
I added the following:
@media only screen and (max-width: 767px) {
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 200;
font-size: 23px;
}}
But this gives me too much space on top and bottom – you might want to take a look.
ALSO: I still don’t have a solution that the font is not showing in font-weight 200 but fat.
On Desktop: On my startpage it looks fine, but on all subpages the font is fatter and not 200. I set all the proper settings in h1 extended styling, but it always gives me 2 different options. I want it to look like on my startpage – on ALL PAGES, slim, not fat!
On Mobile: the font doesn’t appear to be slim either!
Hi,
Thanks for the update.
Just add the font-size property for the h1 element.
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 300;
font-size: 16px;
}
Wrap that css code inside a css media query.
Best regards,
Ismael
Dear Enfold-experts,
I just added a support contact form on my enfold theme.
The problem is that is does not look like the forms here:
I would like the following:
– In my version I have borders around the different text fields – I would like it like in the above link
– There is too much padding under the submit-button
– There does not come a red border when it validates the form
When I try to add some of the CSS modifications on my quick css it does not affect anything:
Here is how I inserted the form:
[av_contact (Email address hidden if logged out) ' title='How can we help you?' on_send='' sent='Your message has been sent! We will get back to you shortly.' link='manually,http://' subject='Support Request' autorespond='' captcha='' form_align='' color='' custom_class='' admin_preview_bg='' av_uid='av-hroj83']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='' multi_select='' av_contact_preselect='' av_uid='av-hkvmv7'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='' multi_select='' av_contact_preselect='' av_uid='av-hhfwe3'][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-h5d55n'][/av_contact_field]
[/av_contact]
I tried to change to layout by:
.av-contact-form-title fieldset h3 {
font-size: 24px;
text-transform: uppercase;
}
or
/*—————————————-
// CSS – Contact form label icons
//————————————–*/
#top .avia_ajax_form.cf-label-icons label{
padding-left: 20px;
}
#top .avia_ajax_form.cf-label-icons label::before {
position: absolute;
left:0;
font-family: ‘entypo-fontello’;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(2) label:before{
content:”e80a”;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(3) label:before{
content:”e805″;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(4) label:before{
content:”e826″;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(5) label:before{
content:”e83b”;
}
/* Input field do not support pseudo elements so we target the last p in the fieldset which is usually the submit button */
#top .avia_ajax_form.cf-label-icons fieldset p:last-child:before{
content:”e844″;
color:#FFF;
font-family: ‘entypo-fontello’;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
But nothing changes
I hope you can help.
-
This topic was modified 6 years, 10 months ago by
ksnoo04.