-
Search Results
-
In reply to: remove dropdown boxes on shop page
Hi,
Please make sure all categories have a description, because when there is no description: Choice 1 below will push down from the category image and on pages with no description everything will look good, however on pages that have a description, Choice 1 will push the description down as well. Choice 2 will push from the category description , creating a space between the description and product images. However if there is no category description, the description container will also be missing, so nothing will change on those pages. So please make sure that **every category and sub-category** have a description and an image.
Use 1 or 2 (read above for explanation, if both are used, there will be space between category image and description, and space between description and product images)
1. To create the space between category title and products please add this css, and adjust bottom margin as needed (it is 0 currently).
#top.tax-product_cat .page-thumb {
margin-bottom: 50px;
}2. To create the space between category description and products use this css.
#top.tax-product_cat .term-description {
margin-bottom: 50px;
}==================
To add a separator will be more difficult and will involve editing the plugin. Since you didnt specify , i just included instructions above on how to add space.
=========
To change the size/color etc. of title this is the current css (i didnt modify anything, change font size below)
#top.tax-product_cat .title_container .main-title {
font-size: 16px;
min-height: 36px;
line-height: 2.3em;
font-weight: 400;
}==================
To modify the space between product images change the % in the code below (top, right, bottom, left) . So keep 2 of the 4 at 0%
You can use decimals so 1.1% is a good place to start
#top.tax-product_cat .shop_columns_3 .products .product {
margin: 0% 1% 1% 0%;
}Thanks,
Nick
In reply to: Left Sidebar Menu & Footer
Hi again,
“Display Sidebar Navigation” is already selected. If you visit the links you will understand what I mean
This is original theme example – http://kriesi.at/themes/enfold/pages/
This is my example – http://bilgin-group.com/blgn-grp-test/?page_id=1456
They are not the same. As you can see the sytles are different. The sidebar menu link does not have underline on rollover and the color is different. But in my example it is not like that. And there are lots of widgets that I dont want. I have created a new sidebar but I could not be able to add something inside of it. Hope you understand what I mean.
Besides these questions can you please tell me how to change font size and character of the main navigation. I want to add a different font but the font selections are very limited in enfol/styling/general. Is it possible to add another fonts besides the dropdown menu fonts
In reply to: Background image
Hi,
You can use Media Queries to target the text on different screens.
@media only screen and (max-width: 767px) {
p.ls-s-1 {
position: absolute;
left: 50px !important;
font-size: 25px;
}
}Don’t remove the !important.
Regards,
Ismael
In reply to: Background image problem
Hi,
Here are the media queries for the various device sizes. Please add it to your /css/custom.css file
@media only screen and (min-width: 768px) and (max-width: 989px) {
.main_color h3 {
font-size: 150%;
}}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.main_color h3 {
font-size: 150%;
}}
@media only screen and (max-width: 479px) {
.main_color h3 {
font-size: 80%;
font-weight:bold
}}Please use classes when you add html tags so this way they can be targeted by css. Invent the class names . So don’t add <div style=””> or <div> or <h3> .. Instead add <div style=”” class=”mydiv-1″> or <h3 class=”my-h3-class”> .. This way you can use css to target that specific tag. You need to do that on bottom of that page with read more , since you have same font problem there as well. Try to use ”em” when you define font sizes and not pixels font-size: 1.1em; and not font-size:14px;
Thanks,
Nick
In reply to: Form Style Conflicts
Hi,
You can find all the form layout of the theme on css > base.css
/* #Forms
================================================== */
#top form {
margin-bottom: 20px; }
#top fieldset {
margin-bottom: 20px; }
#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],
#top textarea,
#top select {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 0px;
}
#top input[type="text"]:focus,
#top input[type="password"]:focus,
#top input[type="email"]:focus,
#top input[type="number"]:focus,
#top input[type="url"]:focus,
#top input[type="tel"]:focus,
#top input[type="search"]:focus,
#top textarea:focus {
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
color: #555;
}
#top textarea {
min-height: 60px; line-height:1.5em;}
#top label{
display: block;
font-weight: bold;
font-size: 12px; }
#top legend {
display: block;
font-weight: normal;
font-size: 15px; }
#top select {
width: 220px; }
#top input[type="checkbox"] {
display: inline; }
#top label span,
#top legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
#top textarea{width:100%;}
#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area{border:1px solid #9AA600;} /*#70A41B*/
#top #wrap_all .error .text_input, #top #wrap_all .error .text_area{border:1px solid #DF653E;}
#top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area{border:1px solid #ffb628;}You can remove or edit them to avoid conflict with other plugin style.
Regards,
Ismael
In reply to: Gravity Forms – Field Sizing
Hi,
You can find all of the theme’s form style on css > base.css
/* #Forms
================================================== */
#top form {
margin-bottom: 20px; }
#top fieldset {
margin-bottom: 20px; }
#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],
#top textarea,
#top select {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 0px;
}
#top input[type="text"]:focus,
#top input[type="password"]:focus,
#top input[type="email"]:focus,
#top input[type="number"]:focus,
#top input[type="url"]:focus,
#top input[type="tel"]:focus,
#top input[type="search"]:focus,
#top textarea:focus {
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
color: #555;
}
#top textarea {
min-height: 60px; line-height:1.5em;}
#top label{
display: block;
font-weight: bold;
font-size: 12px; }
#top legend {
display: block;
font-weight: normal;
font-size: 15px; }
#top select {
width: 220px; }
#top input[type="checkbox"] {
display: inline; }
#top label span,
#top legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
#top textarea{width:100%;}
#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area{border:1px solid #9AA600;} /*#70A41B*/
#top #wrap_all .error .text_input, #top #wrap_all .error .text_area{border:1px solid #DF653E;}
#top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area{border:1px solid #ffb628;}I think this part of the style is the one preventing you from defining input width
#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],
#top textarea,
#top select {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 0px;
}The width is set to 210px.
Regards,
Ismael
In reply to: form css
Hi,
You can find all of the form styles on base.css
/* #Forms
================================================== */
#top form {
margin-bottom: 20px; }
#top fieldset {
margin-bottom: 20px; }
#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],
#top textarea,
#top select {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
-webkit-font-smoothing: antialiased;
border-radius: 0px;
}
#top input[type="text"]:focus,
#top input[type="password"]:focus,
#top input[type="email"]:focus,
#top input[type="number"]:focus,
#top input[type="url"]:focus,
#top input[type="tel"]:focus,
#top input[type="search"]:focus,
#top textarea:focus {
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
color: #555;
}
#top textarea {
min-height: 60px; line-height:1.5em;}
#top label{
display: block;
font-weight: bold;
font-size: 12px; }
#top legend {
display: block;
font-weight: normal;
font-size: 15px; }
#top select {
width: 220px; }
#top input[type="checkbox"] {
display: inline; }
#top label span,
#top legend span {
font-weight: normal;
font-size: 13px;
color: #444; }
#top textarea{width:100%;}
#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area{border:1px solid #9AA600;} /*#70A41B*/
#top #wrap_all .error .text_input, #top #wrap_all .error .text_area{border:1px solid #DF653E;}
#top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area{border:1px solid #ffb628;}The review button on my end is white and it is crystal clear. Can you give us a link to your website?
Cheers,
Ismael
In reply to: Rollover disc arrow replacement
Hi,
Open css > base.css and find this line of codes
.image-overlay{position: absolute; background: #fff; z-index: 500;}
.image-overlay .image-overlay-inside{height:100%; width:100%; position: absolute; left:0; top:0;}
.image-overlay .image-overlay-inside::before{position: absolute; border-radius: 50px; background: #000; height:80px; width:80px; line-height:80px; left:50%; top:50%; margin: -40px 0 0 -40px; z-index: 500; text-align: center; color:#fff;}
.image-overlay .image-overlay-inside::before{content:"E744"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"27A6";}
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"25B6";}
#top .hide-inner-overlay .image-overlay-inside{display: none;}You can change the fontello symbols on these lines.
.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"27A6";}
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"25B6";}Something like this
.image-overlay.overlay-type-extern .image-overlay-inside::before{content:"E714";}
.image-overlay.overlay-type-video .image-overlay-inside::before{content:"E714";}Please refer to this link for more entypo fontello symbols.
http://www.entypo.com/characters/
Cheers,
Ismael
In reply to: Font size questions
Hi,
Can you give us a link to your website? The color pink is for the text color of inactive tabs. You this instead
.tab {
background-color: blue;
color: pink !important;
font-size: 20px;
}Cheers,
Ismael
In reply to: Font size questions
In reply to: Font size questions
Hi Ismael,
Adding the CSS in the Quick CSS or the custom.css didn’t work for me. Still shows as small –
/* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */
.avia-caption-title {
font-size: 25px;
}
.avia-caption-content {
}
Hi Ismael,
Please can you check the last code for me. I got the blue to show-up but the pink did not show-up. Please check.
Also, how can i increase the font sizes and the icon sizes on the tabs?
Kind regards,
MK
I tried this short code, but it just shows up as is, no promobox just shortcode.
[av_promobox button='yes' label='Enter Here' link='manually,#' link_target='' color='silver' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='yes' icon='109']
Learn more
[/av_promobox]
In reply to: Icon embed into text block
You can wrap the shortcode into an ahref element like:
<a href="http://google.com"> [av_font_icon color="" icon="185" size="12px"] </a>Tbh I don’t want to “bloat” this shortcode – if we start to add a link field we also need to add a “target” field (same window/new window), a styling field, etc. – eventually all these fields will be irritating for the user and they’re actually unnecessary because you can use the visual editor and the link icon to turn any content (even shortcodes) into links without coding.
In reply to: Header space
Hi,
1. The header no longer has a gap between menu and top using Chrome, FF, and IE10 . Where do you see a gap and using what browser? http://www.clipular.com/c?6174232=rAJ9MxLXR2ZzeYMGDQwUOR-f9OA&f=a706922a622bfae41703f306ea414436
2. What you will need to do is use a shortcode for the green information button inside each of the text-blocks. Here is the shortcode
[av_button label='Click me' link='page,218' link_target='' color='green' custom_bg='#444444' custom_font='#ffffff' size='large' position='right' icon_select='no' icon='']You will need to edit the label, and for the link , you can chose the ID of the page where you want the link to go to. So this will generate the green button. To display the Boek Nu link on the same line as the button, add it after the button shortcode below the button shortcode . http://www.clipular.com/c?6172260=q_gWPjkVzgUQFbcWbt3LRNEMUB0&f=6fe682a4b390268ff7e7e4ef13be8d1c
OFF TOPIC
Your logo is being resized making it blurry at small screen sized. You can either use this css to make it fit at 200×100 (as it is now)
#top .logo img {
width: 200px;
height: 100px !important;
}
#header_main .container, .main_menu ul:first-child > li a {
height: 100px!important;
line-height: 100px!important;
}or you will need to resize your logo to 156×88 (the size its being displayed now via resize)
Thanks,
Nick
In reply to: Icon embed into text block
1) No, just write 📞 and the character will be displayed. There’s no need to specify the font family because the icons are not “standard” characters but they’re part of the private use area: http://en.wikipedia.org/wiki/Private_Use_(Unicode)
That said we’ll include a “font” shortcode in the next version (I already created it and sent the patch to Kriesi) and then you don’t need to take care of the unicode anymore.
2) The shortcode will support a line-height/color option too. Personally I’d wrap the icon into a span – then you can use the style attribute like:
<span style="color: #333; line-height: 20px; font-size: 20px;">📞</span>In reply to: Menu Font Changes
Hi,
This really works. Please don’t remove the !important.
.current-menu-item a {
color: red !important;
font-size: 20px !important;
font-weight: bold !important;
}This is what I see, when I apply the code above. The current page is “Welcome”.
Regards,
Ismael
In reply to: font size
Hey!
Insert following code into the quick css field:
body {
font: 14px/1.65em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}Replace 14px to change the font-size and 1.65em to change the line height.
Best regards,
Peter
Topic: font size
In reply to: Enfold – Responsive Slide Out Menu **ISSUE**
Nick – Just had a thought and wondered if I could kill two birds with one stone without having to go live…
If this doesnt help you then let me know and ill get the first few pages uploaded
Here’s my thoughts
I’ve attached a link to a set of images that outline three things
a) what I want to achieve overall with the nav (look n’ feel) as created in Photoshop
b) what I’ve achieved thus far (still missing the feint grey line we’ve discussed before)
c) whats going wrong in responsive mode
Here’s the link to the images I’ve grabbed:
http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c
so…….
two things:
1) Can you help me create the feint line still missing from the top of the nav (see image). Its 1 px deep and spans the width of my menu, its grey, should be responsive and allow the HIGHLIGHT BLOCK to travel along it. Obviously, I may add sections so it needs to adapt when I add or take away pages
2) Can you help me remove the superfluous thick line that appears in the slide out responsive menu. I don’t want it at all in this mode. I just want the menu to behave/look like yours in the demo.
Here’s the code I’m using to adapt the nag (as requested)
/* MENU BORDERS */
#top .main_menu .menu ul li:last-child>a {
border-bottom-style: solid;
border-bottom-color: #33302b;
border-bottom-width: 1px;
border-top-style: solid !important;
border-top-color: #33302b !important;
border-top-width: 1px !important;
}
#top .main_menu .menu ul li a {
border-right-style: solid;
border-right-color: #33302b;
border-right-width: 1px;
border-left-style: solid;
border-left-color: #33302b;
border-left-width: 1px;
}
#top .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-top-color: #423e38; !important;
border-top-style: solid;
border-top-width: 1px;
}
/* Top Menu width spacing */
#top .main_menu ul:first-child > li > a {
margin-top: 1px;
padding: 0 10px;
}
#top .container_wrap {
border-top-width: 2px;
}
/* Main Menu - ROLLOFF TEXT */
#top .header_color .main_menu ul:first-child>li>a {
padding-top: 7px !important;
color: #eee6de ;
font-size: 1.4em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - ROLLOVER TEXT */
#top .header_color .main_menu ul:first-child>li>a:hover {
color: #d83300;
font-size: 1.4em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - SUB MENU OFF */
#top .main_menu .menu ul li>a {
color: #e2e2e2;
font-size: 1.2em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - SUB MENU HOVER */
#top .main_menu .menu ul li>a:hover {
color: #e2e2e2 !important;
background-color: #d83300;
}
/* Main Menu - HIGHLIGHT BLOCK */
#top .avia-menu-fx {
display:block;
position:absolute;
top: 28px;
border-style:solid;
border-width:2px;
}
/* HEADER - BOTTOM LINE (attached to slider) */
#header_main {
border-bottom-style: solid;
border-bottom-color: #3b3330;
}In reply to: Logo Padding, Mega Menu, & Font?
Hi mdlhale,
You should never edit the css files from the theme directly, instead add your css to the Styling tabs Quick CSS field or in the theme files the blank custom.css file which is meant for your own custom css.
For the logo, there isn’t any padding that I can see that might correct what you are describing. The logo gets floated left with this:
div .logo {
float: left;
position: absolute;
left: 0;
}So whatever size it is, its just float: left to be on the left size. If you wanted somethign different, an example showing the logo would help :)
The font in the demo is:
13px/1.65em "HelveticaNeue", "Helvetica Neue",Helvetica,Arial,sans-serifSo, 13px HelveticaNeue.
For the mega menu, if you can show us an example we’ll see why that is happening (it shouldn’t be).
Regards,
Devin
In reply to: Enfold – Making Slab text headings responsive
Hi,
Since you are using the font in all screen sizes there is no need to load it in each of the media queries. Only indicate the changes for that specific query without repeating yourself.
so you would have
/* DECLARE FONTS */
@font-face {
font-family:'BebasNeueRegular';
src:url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src:url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight:normal;
font-style:normal;
}
h6 {
font-family:BebasNeueRegular,Geneva,Arial,Helvetica,sans-serif !important;
font-size:95pt;
margin-bottom:-20px;
letter-spacing:-0.0em !important;
font-weight: 200 !important;
}
/* #Media Queries========================================================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:959px) {
h6 {
font-size:80pt !important;
margin-bottom: 20px !important;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:959px) {
h6 {
font-size:70pt !important;
margin-bottom: -15px !important;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:767px) {
h6 {
font-size:60pt !important;
margin-bottom: -20px !important;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:767px) {
h6 {
font-size:80pt !important;
margin-bottom: -20px !important;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:479px) {
h6 {
font-size:50pt !important;
margin-bottom: -10px !important;
}
}Be careful when using a very broad selector like h6, it has no specificity and is defined many times in the theme with much higher specificity which will override/counterfeit your code very easily.
You also do not need this block … @media only screen and (max-width:767px) { …or this block ….@media only screen and (max-width:959px) { …. can you think of one screen size where the blocks of code below it aren’t already targeting it? the only reason for 767 that i can think of is for the dropdown menu for all small screens, but 959…. dont know
Thanks,
Nick
Hi,
Just wondering how to increase the paragraphs and also the font sizes in enflold.
The paragraphs are currently too close together.
In reply to: Does the contact form have a file submit?
Hi,
You can style the Gravity Forms font with this
.gform_wrapper {<br /> font-family: Arial !important;<br /> font-size: 14px !important;<br /> color: red;<br /> }Regards,
IsmaelIn reply to: Enfold – Making Slab text headings responsive
Hi,
It depends on what device you are trying to target. You only need this if you’re trying to target screens with 959px resolution and lower that includes iPad, iPhone and other mobile devices.
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
@font-face {
font-family: 'BebasNeueRegular';
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: 20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}Regards,
Ismael
In reply to: Enfold – Making Slab text headings responsive
BIG BIG thanks… Although it seems rather long winded for one heading. Would there be a short-hand version or a better way to write this:
SEE BELOW…..
/* DECLARE FONTS */
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 95pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
/* #Media Queries
========================================================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: 20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 70pt !important;
margin-bottom: -15px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 60pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 50pt !important;
margin-bottom: -10px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
In reply to: Enfold – Making Slab text headings responsive
Hi,
For example, you want to apply the style when viewing on a mobile device, you should use this
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
@font-face {
font-family: 'BebasNeueRegular';
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 90pt !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}The font will only apply if the user is viewing on a mobile device.
Regards,
Ismael
In reply to: Insert a new font
In reply to: Menu Font Changes
