-
Search Results
-
In reply to: How to change H1 font size?
Hello,
I add this code to my CSS
.social_header .phone-info {
color: white;
font-size: 1.70em;
}
to increase the font and change the color on toolbar in header but doesn’t work for me. I’m using the last WordPress and Enfold versions.
Can you help me?
Thank you.
RegardsIn reply to: How to change H1 font size?
Topic: comments font size
Hey,
I`m trying to change the font size of the comments by adding the following to custom.css or the quick style, but no luck:
#top .comment_text { font-size: 48px;}
and even this:
#respond p.comment-subscription-form label { font-size: 46px !important; }but no change….
Please help.
Thank youHey!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
.av-masonry-entry .av-masonry-entry-title { font-size: 12px; }Regards,
YigitIn reply to: Changinf H1 and H2 size and higher/lower case
Hi nowhere!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 { text-transform: none; } h2 { font-size: 24px; } h1 { font-size: 28px; }Regards,
YigitIn reply to: Fullwidth Blog Post Layout
Hey!
1.) Please use this:
.fullsize .blog-tags { display: block; text-align: center; font-size: 20px; }2.) Please edit the attachment code from this:
<div id="attachment_3399" style="width: 310px" class="wp-caption alignright"><a href="http://www.threeriversrealtymn.com/wp-content/uploads/2014/03/Ryland-Homes-New-Construction-Homes-Home-to-be-built-in-mn-Lots-for-Sale.jpg" rel="lightbox[auto_group1]" class="size-medium wp-image-3399" style="position: relative; overflow: hidden; display: block;"><img class="" alt="Ryland Homes, New Construction Homes, Home to be built in mn, Lots for Sale" src="http://www.threeriversrealtymn.com/wp-content/uploads/2014/03/Ryland-Homes-New-Construction-Homes-Home-to-be-built-in-mn-Lots-for-Sale-300x225.jpg" width="300" height="225"><span class="image-overlay overlay-type-image" style="opacity: 0.699999988079071; left: -5px; top: 0px; overflow: hidden; display: block; height: 234px; width: 318px;"><span class="image-overlay-inside"></span></span></a><p class="wp-caption-text">Ryland Homes – 16 New Construction Communities – Free Basement Promotion</p></div>To this:
<a class="wp-caption alignright" href="http://www.threeriversrealtymn.com/wp-content/uploads/2014/03/Ryland-Homes-New-Construction-Homes-Home-to-be-built-in-mn-Lots-for-Sale.jpg" rel="lightbox[auto_group1]" class="size-medium wp-image-3399" style="position: relative; overflow: hidden; display: block;"><img class="" alt="Ryland Homes, New Construction Homes, Home to be built in mn, Lots for Sale" src="http://www.threeriversrealtymn.com/wp-content/uploads/2014/03/Ryland-Homes-New-Construction-Homes-Home-to-be-built-in-mn-Lots-for-Sale-300x225.jpg" width="300" height="225"><span class="image-overlay overlay-type-image" style="opacity: 0.699999988079071; left: -5px; top: 0px; overflow: hidden; display: block; height: 234px; width: 318px;"><span class="image-overlay-inside"></span></span></a><p class="wp-caption-text">Ryland Homes – 16 New Construction Communities – Free Basement Promotion</p>Cheers!
IsmaelIs there a way to make the title font smaller in case it take more than one line so it will always only take one line?
Hi jansthh!
Please use this on Quick CSS or custom.css:
@media all and (max-width: 767px) { .responsive #top .slideshow_caption h2 { font-size: 15px; } .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title { font-size: 11px; } }Cheers!
IsmaelIn reply to: Problem with responsive transparent header
Hi!
You can try to decrease the line height and font size with
@media only screen and (max-width: 767px){ .page-id-3595 .slideshow_inner_caption { font-size: 10px; line-height: 1.2em; } }Best regards,
PeterIn reply to: Icons in menu
http://universitarios.org.ar/
Did it. Now it looks good when at top of the site, but not when I scroll down.I used this for the link text field:
<span class=”av_font_icon avia_animate_when_visible av-icon-style-border av-no-color avia-icon-pos-center avia_start_animation avia_start_delayed_animation” style=””><span class=”av-icon-char” style=”font-size:15px;line-height:20px;width:20px;” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”></span></span>
And this for custom css:
#menu-item-2539 .av_font_icon.av-icon-style-border .av-icon-char { padding: 34px 0 0 0; border-width: 0; }
Hello,
My site is dev.toogoodwinery.com
I am using posts for their events as you can see under the Events tab. My question is the white margins around the Feature Image. No matter the size of the image that white border shows up. Also, where is the controls to change the text color for the Post details under the title in both the main post and the sidebar? I searched the forum but could not find an answer to this.
I really like this template by the way, most everything else is easy to control and find! I am sure this issue is all me!
Cheers,
Russ
Topic: Mobile Problem
Hello,
This is a topic I started on Themeforest and was asked to open a thread here.
I have problems on mobile with these 2 websites:
http://www.snnlaw.co.il/
http://www.ranibleierstudio.co.il/As you’ll see, when going mobile on these 2 sites, the buttons and links on the homepage don’t work. Some of them do, and some don’t. I tried it on iPad, iPhone and Galaxy S3. It’s a big problem for me since the mobile part is very important for me. I have been using the AVIA layout builder.
This is the quick css I put in the enfold settings:
h1, h2, h3, h4, h5, h6, p, body, #socket .copyright, #top .footer_color .input-text, #top .footer_color input[type=’text’], #top .footer_color input[type=’input’], #top .footer_color input[type=’password’], #top .footer_color input[type=’email’], #top .footer_color input[type=’number’], #top .footer_color input[type=’url’], #top .footer_color input[type=’tel’], #top .footer_color input[type=’search’], #top .footer_color textarea, #top .footer_color select .main_menu ul:first-child > li > a{
font-family: ‘atlas’, sans-serif;
font-weight: 400;
}h1{
font-size:60px;
line-height: 66px;
}h2{
font-size:40px;
line-height: 46px;
}h3{
font-size:28px;
line-height: 34px;
}p{
font-size:19px;
line-height: 25px;
}#header_main .container, .main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
font-family: atlas;
font-weight: 400;
font-size: 18px;
}#socket .copyright{
font-size:14px;
line-height: 18px;
}#top .footer_color .input-text, #top .footer_color input[type=’text’], #top .footer_color input[type=’input’], #top .footer_color input[type=’password’], #top .footer_color input[type=’email’], #top .footer_color input[type=’number’], #top .footer_color input[type=’url’], #top .footer_color input[type=’tel’], #top .footer_color input[type=’search’], #top .footer_color textarea, #top .footer_color select{
font-size:17px;
line-height: 18px;
width: 75%;
}#top select{
background-position: 12px center;
margin-top: 10px;
}#top .socket_color .input-text, #top .socket_color input[type=’text’], #top .socket_color input[type=’input’], #top .socket_color input[type=’password’], #top .socket_color input[type=’email’], #top .socket_color input[type=’number’], #top .socket_color input[type=’url’], #top .socket_color input[type=’tel’], #top .socket_color input[type=’search’], #top .socket_color textarea, #top .socket_color select{
width: 100%;
}#top h3 a {
font-size: 19px;
}.rani-about-small{
display:none;
}#top .main_menu .menu li ul a {
width: 100%;
height: auto;
float: left;
text-align: right;
line-height: 23px;
padding: 8px 15px;
font-size: 16px !important;
min-height: 23px;
max-width: none;
text-decoration: none;
}.main_menu ul:first-child > li a {
height: 60px;
line-height: 60px;
padding-right: 20px;
}.avia-button.avia-size-medium {
font-size: 17px !important;
font-family: atlas !important;
color:#000 !important
}And this is what I put in the custom.css file:
@font-face{
font-family:’atlas’;
font-weight:400; /*(regular)*/
font-style: normal;
src: url(‘atlas-aaa-400.eot’);
src: url(‘atlas-aaa-400.eot?#iefix’) format(’embedded-opentype’),
url(‘atlas-aaa-400.woff’) format(‘woff’),
url(‘atlas-aaa-400.ttf’) format(‘truetype’);
}#top textarea {
width: 100%;
height: 140px;
}
#top .avia-menu-fx {
height: 5px;
}
#top .scroll-down-link {
height: 65px;
width: 100px;
margin: 0px 0 0 -40px;
line-height: 70px;
position: absolute;
left: 50%;
bottom: -1px;
color: #000;
background: #AAA;
background: #50d1f5;
text-align: center;
font-size: 40px;
z-index: 100;
text-decoration: none;
border-top-left-radius: 223px;
border-top-right-radius: 223px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}Plus these are the plugins I use:
RTL Tester
Limit Login Attempts
Contact Form 7
Wordpress ImporterThanks for your help.
YakiTopic: Change the 'rollover' arrow
Hi there,
How do I change the rollover ‘arrow’ that appears over interactive boxes. I assume its accessing an ICON font but how do I change it to say a chunky/thick ‘plus’ (+) sign instead?
Is it also possible to change the size of both the circle and the icon font too (if this is poss then might need to adjust positioning within circle/disc)? I’m OK with basic CSS and have a Child Theme already setup?
Cheers
AndyHi there,
I would like to do some MAIN MENU CSS tweaks for the following:1) Fonts size
2) Spacing between letters & menu categories
3) Change rollover font colors (top level) of drop down menu
4) Change rollover font colors (sub levels) of drop down menu
5) Change rollover background (top level) of drop down menu
6) Change rollover background (sub level) of drop down menu
7) Move ‘whole’ menu along (moving px/% to the left/right or up/down)
8) Remove menu tick (on the underline)
9) Adjust underline bar thickness & color
10)Add a Google Font not in default setup. I first played with adding additional fonts in my Child theme when your theme first came out but abandoned it as it kept messing up the theme and there was conflicting advice how to do this for MENUS and SLAB fonts. A year on – Do I still have to add any additional fonts (Google) by adding them to a font file and then loading them via CSS or is there an easier way now?I know its a lot but im figuring you’ve done this many time by now.
Hope you can help
Thx
AndyIn reply to: Tables are not responsive
Hey hrskills!
This is an old issue with the table and we haven’t found a fix yet. You can remove the mobile device media query to avoid the wrong table stack. Edit css > shortcodes.css, find this code on line 1251:
@media only screen and (max-width: 767px) { .responsive div .avia_responsive_table .avia-data-table table, .responsive div .avia_responsive_table .avia-data-table tbody, .responsive div .avia_responsive_table .avia-data-table tr, .responsive div .avia_responsive_table .avia-data-table td, .responsive div .avia_responsive_table .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;} .responsive .avia_responsive_table .avia-data-table{border-style:solid; border-width: 1px;} .responsive .avia_responsive_table .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;} .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th{display:none;} .responsive .avia_responsive_table .avia-data-table td:before { display:block; font-style: italic; font-size: 11px; } .responsive .avia_responsive_table .avia-data-table td { position: relative; } .responsive .avia_scrollable_table { width: 100%; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td { white-space: nowrap; } }Remove the code. We might need to adjust the table width. Please get back to us after you removed it.
Best regards,
IsmaelIn reply to: Menu CSS changes not working
Thank you, kind sir! I got exactly the effect I wanted, even adding an increase in font size to make it stand out even more.
In reply to: Different Size Icon Lists
Hi!
1) normal is not a valid value. Please use this code instead:
.avia-icon-list .iconlist_title { text-transform: none !important; }2) To change the font size use:
#top .toggle_content, .js_active .toggler { font-size: 13px; }Cheers!
PeterIn reply to: Submenu
Hi!
Please use following code in Quick CSS
.sub_menu>ul>li>a, .sub_menu>div>ul>li>a { font-size: 14px; }Cheers!
YigitIn reply to: Submenu
The changes I’ve made:
#header_main .container, .main_menu ul:first-child > li a, .logo img, .logo a { height: 125px !important; line-height: 125px !important; max-height: none !important; } #top .social_bookmarks { top: 20%; } #top .social_bookmarks li a { font-size: 18px; } #top .social_bookmarks li { margin-right: 5px; } #top .main_menu .menu li ul a { font-size: 20px; } #megaMenu ul.megaMenu ul.sub-menu li.menu-item > a { font-size: 18px; }What I need to make bigger:
Hey!
Please add following code to Quick CSS
@media only screen and (max-width: 990px) and (min-width: 768px) { div .slideshow_caption h2 { font-size: 18px; }}Regards,
YigitIn reply to: Submenu
Hi!
Please add following code to Quick CSS instead
#megaMenu ul.megaMenu ul.sub-menu li.menu-item > a { font-size: 18px; }If that does not work, please post a screenshot and show the changes you would like to make
Cheers!
YigitIn reply to: Issues with secondary header navigation, top right
Hi Ismael, thanks for the quick reply. I’d like to confirm the following.
1. I have a few other Quick CSS code being used and want to make sure this is how it should appear:
#############
div .av_one_half { margin-left: 2%; width: 49%; }
.avia_transform .avia-gallery-thumb img { opacity: 1; }
#top div.woocommerce-message { border-color: #A81010; background-color: #A81010; color: white; }
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 5px;
font-size: 12px;
}
}
##############If so, please confirm. Thanks, Anthony
In reply to: Editing Mobile Version of Site
Hey!
I’m sorry. Make sure that you remove browser cache then reload the page a few times. Please use this:
@media only screen and (max-width: 480px) { .responsive.social_header .phone-info, .responsive.social_header .phone-info a { text-align: center; float: none; clear: both; margin: 0; padding: 0; font-size: 11px !important; } .responsive.social_header .phone-info a { clear: both; display: block; margin-bottom: 2px; padding: 3px 0; } }The header should look like this:
Regards,
IsmaelHi Soapmarine!
You can use the icon shortcode, generate it on a post or a page then copy the actual shortcode on a text widget. The icon shortcode look like this:
[av_font_icon icon='ue8f5' font='entypo-fontello' style='' caption='' link='manually,http://' linktarget='' color='' size='40px' position='left' custom_class=''][/av_font_icon]Regards,
IsmaelIn reply to: Smaller Menu size
Hi mikaelsv!
Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed
span.avia-menu-text { font-size: inherit; } .av-main-nav > li > a { font-size: 11px !important; }Cheers!
YigitHi, in this thread https://kriesi.at/support/topic/responsive-bug-on-image-slider-text/ I was told how to change the responsive text within an Easy Slider which you can see from the code below. Please can you let me know how to make the text resize correctly with the Full Width Easy Slider (http://gd3.geneticdigital.co.uk/g-test-page/) as it’s not displaying correctly in landscape & portrait in a Nexus 7 and iPhone 5.
Thanks
Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ } @media only screen and (max-width: 767px) { .avia-slideshow .avia-caption .avia-caption-title { font-size: 18px; padding: 2px; } } @media only screen and (max-width: 480px) { .avia-caption{ padding: 0; bottom: 3px; } .avia-caption .avia-caption-content p {padding: 2px;} }Topic: Smaller Menu size
Hi,
I have tried to use the quick css to make the menu smaller, but it doesn’t seem to work.
.main_menu ul:first-child>li>a {
font-size: 11px;
}
