Hi,
Thank you for the screenshot, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
.woocommerce small,.woocommerce .product-name a {
font-size: 100% !important;
}
Best regards,
Mike
Mike,
in order to view the small font. you have to begin an order.
after you order any item you click on VIEW CART in the upper right hand corner
IN THE CART YOU WILL SEE
1. a picture of the item you are ordering
2. UNDER PRODUCT: The name of them item in a decent size (I think 12pt)
and the line: “This item is set for shipping click here to pick up this item”
(It is the above line that is VERY VERY VERY SMALL. It looks like 6pt. although i used the fount extension in chrome and it says the font is 12.3 pt lato.
The point is..it is very small.
the line is inserted because of the woocommerce UPS SHIPPING plugin.
Thanks
Hi
Thank you for previous answer. I had the home page with a title, but I had not made the frontpage setting.
I have 2 questions
1-I have created theme sidebars with 6 different pages and have set these to replace widget sidebar pages. These doesn’t show when I press sidebar pages under settings under the pages.
2 When I put widget navigationtool into the sidebars, they do show on the pages, but I would like to increase the font size. I have tried to change by using advanced styling, but without result.
Hi Gary,
Please try this CSS as well:
.pickup-location-cart-item-field small {
font-size: 12px;
}
Best regards,
Rikard
Hey grivers99,
Sorry for the late reply, do you mean the drop down cart next to the menu, or the cart page?
I took a look at both on your site but I didn’t find any text that was 6px, but I found the description small, which text do you want to make larger?
For the cart on the cart page, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
.woocommerce th,.woocommerce td,.woocommerce p {
font-size: 20px !important;
}
Best regards,
Mike
Hi Kevin,
The site you posted just have it’s ul’s font size set to 16.
So if you add this CSS code in Quick CSS:
#top ul {
font-size: 16px;
}
that should be similar to the site you gave.
The other method would be to use the :before selector.
– https://www.w3schools.com/cssref/sel_before.asp
Best regards,
Nikko
Hi Rikard
I have changed it all back again to the standard circle/dot.
However – I still want to increase the size of the actual bullet itself and not the font. How can I do that?
Cheers.
Kevin.
Hello is there some Quick CSS that I can use to change the width of this “CALL” button so it matches the “SCHEDULE” button?

The code below is what I’m using in the navigation label
<span class=”av-icon-char” style=”font-size:18px;line-height:18px;” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”></span> CALL
-
This topic was modified 5 years, 12 months ago by
1stamerican.
Thank you… looks great! However we are still having the issue with the character count in the excerpt (we need the ability to increase the count). As previously mentioned, the code you previously provided to adjust the character count did not work. Additionally, is there a way to increase the font size of the title and excerpt? This is a 2 part question…. Thank you.
-
This reply was modified 5 years, 12 months ago by
brockwatson.
Hi,
Thanks for the update. The CSS I gave you was specific to the home page, if you want it to apply to other sections as well then please give them the same ID in the develop tab in the element option. For example; form-section. Then change this CSS:
@media only screen and (min-width: 768px) {
.home #av_section_1 .container {
padding: 0 20%;
}
}
.home #av_section_1 .container .button {
width: 100%;
font-size: 20px;
}
To this:
@media only screen and (min-width: 768px) {
#form-section .container {
padding: 0 20%;
}
}
#form-section .container .button {
width: 100%;
font-size: 20px;
}
Best regards,
Rikard
I had recently asked about the thumbnail size in my shopping cart..but thought I should start a new thread concerning the font size.
The default font in the shopping cart is 6pt. Its way too small for most of our shoppers online.
Can it be changed through css?
if so..can you give me the css code?
Thanks so much in advance?>
Jordan,
I don’t have that exactly in my custom CSS. I have this one:
li#menu-item-6327 a:hover .avia-menu-text {
border: 2px solid #0098cf !important;
background: white !important;
color: #0098cf !important;
}
If I remove that. The main Donate Now button does not turn white and the while the blue border around the drop downs does go away, the box where that border was turns blue and the text white.
This is all the code related to 6327:
/*———- Main Menu – donate button——–*/
#menu-item-6327 .avia-menu-text {
color: white !important;
background: #0098cf !important;
}
li#menu-item-6327 a:hover .avia-menu-text {
border: 2px solid #0098cf !important;
background: white !important;
color: #0098cf !important;
}
/* ——Donate Button – Drop Down buttons—–*/
#menu-item-6327 li a {
color: white!important;
background: #0098cf!important;
margin: 9px 0;
border: 2px solid #fff;
width: 70%;
text-align: center!important;
}
#menu-item-6327 li a .avia-menu-text {
font-size: 16px;
}
#menu-item-6327 li:hover a {
color: #0098cf!important;
background: #fff!important;
}
.header_color .main_menu ul ul {
background-color: transparent;
}
Hi,
I edited your Color Section element and gave it a unique ID “social-icons” and then added following code to bottom of Quick CSS field
#social-icons .av-icon-char {
font-size: 40px !important;
}
Please review your website :)
Cheers!
Yigit
Hi Ismael,
thank you for your new answer and the new snippet!
Never heard about the dash symbol in a font name.
Could you please explain what it is? Or ist it to complicated?
Irrespective of this the snippet works fine…thx again!
Only in the commentary-function it doesn’t work. Look at the screenshot.
Which term is missing in the first line? I also miss it in the secondary
header menu, but I think the courier font is to restless for that position
and size. ;-/ Don’t you think so?
Best regards
Carsten
Hi,
For some reason any custom css that I’ve written to reduce font sizes and page styling across different devices has stopped working.
It’s fine on desktop and iPad, but not on mobile, but it was all fine yesterday? I’ve started all css entries with, for example:
@media only screen and (max-width: 768px) {
@media only screen and (min-width: 769px) and (max-width: 989px) {
@media only screen and (min-width: 990px) {
I did install WP Fastest Cache yesterday and the site was functioning okay, but not today so I’ve removed it with no effect. I’ve cleared the cache on my mobile and also tried different mobile browsers, but again with no effect.
Would you mind taking a look please, site details in private section.
Thanks in advance,
Johnny
Hi,
Thank you for the update.
It doesn’t seem to work because of the dash symbol in the font name. To fix it, we used this code in the Quick CSS field to apply the Courier New font correctly.
#top #wrap_all .avia-slideshow-button, #top .avia-button, .html_elegant-blog .more-link, .avia-slideshow-arrows a::before {
font-family: 'courier new','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif !important;
font-size: 15px;
font-weight: 500;
}
Best regards,
Ismael
Hi, I have problem with the Menu sublevel, I have tried to change the color and size with the Main Menu sublevel Links, but nothing changes.
Then I added
#top #header .mega_menu_title a {color: #fff !important; font-size: 12px;}
in quick CSS, and it worked, but I still have problem with the alignment and the dimension of the back ground, how can I fix it?
This reply has been marked as private.
Hi studiono,
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: 479px) {
#top .avia-caption-content p {
font-size: 13px;
}
.responsive #top .slideshow_caption h2 {
font-size: 22px !important;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hey studiono,
Could you please give us a link to your website, we need more context to be able to help you.
The code is not having all the braces it needs:
@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption .avia-caption-content {
font-size: 13px !important;
}
}
Best regards,
Victoria
Hi,
Sorry for the late reply, to increase the social icons and the “phone” text, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
.phone-info > span {
font-size: 20px !important;
}
#top .social_bookmarks li a {
font-size: 30px !important;
}
Best regards,
Mike
Hi,
First Social Sharing Icons Question
I am trying to get my EmEnfoldold social sharing Icons to show up on every page, right above the footer (See Attachment). The way I have added these so far is simply by going into everyone of my pages (on the WordPress side) and placed the Enfold Social Sharing block at the bottom. I have tried adding the following html of the Enfold Social Share Icons to the footer.php file via ftp so that it shows up on all pages. However, when adding them to the footer.php file, when on Product pages, it doesn’t share the corresponding Product, instead it shares the shop page meta data and not the product. How can I get it to show up universally throughout the website in the footer? As you can see, there are no product pages on the WordPress end where I can add these to the bottom like with other pages. You can see a screenshot here of where it should show up in the product pages (Attachment)
Here is the HTML/Default Editor version of the social share section I tried implementing into the footer:
<div id="sharethebeauty_custom-block-id" class="av-layout-grid-container entry-content-wrapper main_color av-flex-cells avia-builder-el-7 el_after_av_masonry_entries avia-builder-el-last sharethebeauty_custom-block-css-class submenu-not-first container_wrap fullsize" style=" ">
<div class="flex_cell no_margin av_one_full avia-builder-el-8 avia-builder-el-no-sibling sharethebeauty_custom-cell avia-full-stretch " style="vertical-align:middle; padding:30px 60px 30px 60px ; "><div class="flex_cell_inner">
<div id="sharethebeauty_custom-ID" class="av-social-sharing-box sharethebeauty_custom-css-class avia-builder-el-9 avia-builder-el-no-sibling sharethebeauty_custom-css-class "><div class="av-share-box"><span class="share-label">Share</span><h5 class="av-share-link-description av-no-toc ">Share The Beauty</h5><ul class="av-share-box-list noLightbox"><li class="av-share-link av-social-link-facebook"><a target="_blank" aria-label="Share on Facebook" href="https://www.facebook.com/sharer.php?u=https://timfloresphoto.com/shop/&t=Shop" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on Facebook" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on Facebook</span></a><div class="avia-related-tooltip avia-tt" style="top: -31px; left: 19.5px; display: none; opacity: 0;"><div class="inner_tooltip">Share on Facebook</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></li><li class="av-share-link av-social-link-twitter"><a target="_blank" aria-label="Share on Twitter" href="https://twitter.com/share?text=Shop&url=https://timfloresphoto.com/?p=4121" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on Twitter" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on Twitter</span></a><div class="avia-related-tooltip avia-tt" style="top: -31px; left: 208.567px; display: none; opacity: 0;"><div class="inner_tooltip">Share on Twitter</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></li><li class="av-share-link av-social-link-pinterest"><a target="_blank" aria-label="Share on Pinterest" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Ftimfloresphoto.com%2Fshop%2F&description=Shop&media=" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on Pinterest" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on Pinterest</span></a><div class="avia-related-tooltip avia-tt" style="top: -31px; left: 397.133px; display: none; opacity: 0;"><div class="inner_tooltip">Share on Pinterest</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></li><li class="av-share-link av-social-link-linkedin"><a target="_blank" aria-label="Share on LinkedIn" href="https://linkedin.com/shareArticle?mini=true&title=Shop&url=https://timfloresphoto.com/shop/" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on LinkedIn" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on LinkedIn</span></a></li><li class="av-share-link av-social-link-tumblr"><a target="_blank" aria-label="Share on Tumblr" href="https://www.tumblr.com/share/link?url=https%3A%2F%2Ftimfloresphoto.com%2Fshop%2F&name=Shop&description=High%20Resolution%20Images%20from%20around%20the%20world%20for%2050%25%20Off.%20Download%20Now%21%20%28Code%3A%20Life%29" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on Tumblr" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on Tumblr</span></a></li><li class="av-share-link av-social-link-reddit"><a target="_blank" aria-label="Share on Reddit" href="https://reddit.com/submit?url=https://timfloresphoto.com/shop/&title=Shop" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share on Reddit" rel="noopener noreferrer"><span class="avia_hidden_link_text">Share on Reddit</span></a></li><li class="av-share-link av-social-link-mail"><a aria-label="Share by Mail" href="mailto:?subject=Shop&body=https://timfloresphoto.com/shop/" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="" data-avia-related-tooltip="Share by Mail"><span class="avia_hidden_link_text">Share by Mail</span></a></li></ul></div></div>
Last Social Sharing Icons Question
How can I add these social sharing icons right underneath the Add to Cart Button (and Save Wishlist Button)? If possible, I would like to avoid editing any functions file to avoid possible web speed decreases.
Example of where placement should go.
You can view my website at the following:
Website:
https://timfloresphoto.com/shop
Website Product:
https://timfloresphoto.com/product/upper-antelope-canyon-falls/
Looking forward to hearing back from you :)
Hi there
I need to change the font size of .avia-caption-content
I can not do that! it seems like there’s this
@media only screen and (max-width: 479px)
.responsive #top .slideshow_caption .avia-caption-content {
font-size: 13px !important;
}
that I can’t override – how can I do that??
thanks!
Hey Clay,
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
#menu-item-6327 li a {
color: white!important;
background: #0098cf!important;
margin: 10px 0;
border: 2px solid #fff;
width: 70%;
}
#menu-item-6327 li a .avia-menu-text {
font-size: 16px;
}
.header_color .main_menu ul ul {
background-color: transparent;
}
If you need further assistance please let us know.
Best regards,
Victoria
Thanks for the info.. One last question to clear up for this one.. (And a huge thank you for guiding me on this.. Could not have done this without you.. I appreciate it!)
I entered debug mode and created a button and captured shortcode..
Shortcode for button: [av_button label='GET OFFER' icon_select='no' icon='ue800' font='entypo-fontello' size='small' position='center' label_display='' title_attr='' color='dark' custom_bg='#1b4074' custom_font='#1b4074' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k8ag0jq2' admin_preview_bg='']
I need to set the button to link to a section on the page.
Specifically this section (pulled from the css name): .home #av_section_2 .container
Can you show me where I need to add that to the shortcode so that when a user clicks on the button it will take them to the section in question?
I really appreciate the help. I have been playing with it and looking at the documentation but haven’t figured it out.
Thanks! Have a great day!
Will
Hi
Reengaging with this ticket.
I am finding that SEVERAL font configuration options do not work.
I understand that I can supersede the the issue by manually adding CSS but that seems to be a patch to the problem and not a resolution.
I eventually need to hand the site over to the client and they are expecting the font configuration options to work. Do they??
Examples of configuration options not applying:
General Styling…Footer Heading Color: Footer Heading color
Screenshot: https://www.screencast.com/t/hWmATNEJ2jD
Advanced Styling:
Small bar above Main Menu …Font Color
Main Menu sublevel Links Font Color
Menu Item Button – Font Color
Main Menu Links – Font Color
Try changing them. The configuration options do not apply.
Screenshot: https://www.screencast.com/t/7ms3VtHh
Side Q: where is the copyright font size being configured? There appears no obvious spot.
Note: I manually added quick CSS Under General Styling… Quick CSS but it does not resolve the issue.
Screenshot: https://www.screencast.com/t/Hkw2MSgar
Please advise on each point reported.
Hi,
Thanks for the update. I couldn’t see any problems on your mobile menu, could you post a screenshot of it please? Or maybe I’m misunderstanding you, do you want the Roboto font for the sub menu items?
You can remove the styling from the special amp by adding this CSS:
.special_amp {
font-family: inherit;
font-style: normal;
font-size: inherit;
line-height: inherit;
font-weight: normal;
}
Best regards,
Rikard
Hi There,
I have made some styling changes to my blog, I’m using the default blog style with the grid layout, the changes appear on the desktop but not mobile. Here are the changes I’ve made.
1. Remove the small thumbnail from the post page.
.single .big-preview.single-small, .single .blog-meta {
display: none!important;
}
2. Change the style of the blog titles on the blog page.
h3.slide-entry-title.entry-title {
text-align: cente r!important;
margin-top: 12px !important;
font-family: poynter-oldstyle-display, serif !important;
font-weight: 300 !important;
font-size: 22px !important;
text-transform: none !important;
letter-spacing: 0.3px !important;
}
-
This topic was modified 6 years ago by
Byrne.
Hey Nazarii,
Change to what or how(font-size, color, etc)?
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
Victoria
One more question: The &-sign is not displayed correctly in Special Heading. See here “Einsatzgebiete & Module”: http://h2860849.stratoserver.net/wordpress/index.php/logbuch/
I would really like to use this sign in headings but I need to use Special Heading because in regular text/heading the font size doesn’t change on mobile devices, which of course causes real problems on small displays.
Once again thx in advance!