Unless you are setting your font size with px then it will automatically size itself for the device.

Eg, you can just set your font size using ems or % if its causing specific issues on a specific viewport.

Hi,

You need to create media queries for this type of situation whereby on different screen sizes, the css that affects the area changes to make objects conform to the new screen size.

.avia-section h1 span {

font-size: .7em;

}

@media only screen and (max-width: 767px) {

.avia-section h1 span {

font-size: .5em;

position: relative;

bottom: 20px;

}

}

@media only screen and (max-width: 479px) {

.avia-section h1 span {

font-size: .3em;

position: relative;

bottom: 20px;

}

}

Please add the above code to /css/custom.css OR to quick css located in Enfold > (theme options) Styling Layout… text area on bottom of page.

Thanks,

Nick

Hi,

I see no difference between

IE http://i.imgur.com/GP9vO4C.png

and

Chrome http://i.imgur.com/wVqvypW.png

This is the styling used on the Home button

.main_menu ul:first-child > li > a {

display: block;

text-decoration: none;

padding: 0 13px;

font-weight: normal;

font-size: 12px;

font-weight: 600;

font-size: 13px;

}

If you want to create some styling specific to IE simply add the css that you want only IE to render in the empty line of the block below. Then you can add this block to header.php , just find the line </head> in the header.php file, and paste the block below above it.

<!--[if IE]><!-->

<style type="text/css">



/* add your IE only css above this line */

</style>

<!--<![endif]-->

Thanks,

Nick

Hi SGS_Marketing,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

.phone-info {

font-size: 14px;

}

Regards,

Devin

Hi,

Here is the snapshot of the page in question, http://www.clipular.com/c?13090040=Ny7LUHp01XCDd21TqFYCMjfLEEs&f=.png

It’s the third page on the Enfold admin vertical menu.

To control the font size you just need the very basic of basic css. However I will forward your request to Kriesi

body {

font: 15px/1.65em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

color: #444;

}

then drop it into Quick CSS on bottom of Enfold > (Theme Options) > Styling Layout … text are on bottom of the page… or into /css/custom.css

You can suggest anything you want on this thread which Kriesi has been using to make updates https://kriesi.at/support/topic/enfold-feature-requests

However if you want to do it yourself, you can always use Google Chrome dev tools, which are built into the browser to easily locate any css you want , then copy and paste it into Quick CSS , takes seconds and no need to know any coding.

Thanks,

Nick

Hi,

1. Please add this to /css/custom.css OR to Quick CSS

.flex_column .widget .widgettitle, .content .widget .widgettitle {

margin-bottom: 1em;

}

#top .widget ul {

list-style-type: none;

list-style-position: outside;

margin-left: 7px;

}

2. Here is the css that is used on the blue button on the page you linked to

.avia-button-wrap {

display: inline-block;

}



#top .main_color .avia-color-theme-color {

color: red; /*color of button text*/

}



body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);/*text shadow rgb, 0.1 transparent*/

}



.main_color .avia-color-theme-color{

background-color: #2D5C88; /*main button background color*/

border-color: #2D5C88;/*main button border color*/

}



.avia-button.avia-size-large { /*size, can change large to medium or small*/

padding: 13px 30px;

font-size: 14px;

min-width: 127px;

}

.avia-button.avia-position-left {/*position, can change left to right or center*/

float: left;

display: block;

}



body div .avia-button {

border-radius: 3px;

background-image: url("../images/layout/bg-button.png");

background-repeat: repeat-x;

background-position: 0 0;

padding: 10px;

font-size: 12px;

text-decoration: none;

display: inline-block;

border-style: solid;

border-width: 1px;

margin: 3px 0;

line-height: 1.2em;

position: relative;

font-weight: 600;

text-align: center;

max-width: 100%;

}

4) It’s a text font, so you would write it.( ♥ <— heart ) so just copy whatever you need to use by selecting it on a page and copy the glyph itself and paste it as you would paste any letter or word , and then style it with font size and color, etc..

Thanks,

Nick