Hi,

You can add something like this on your custom.css OR quick CSS

.more-link {

border-radius: 3px;

background-image: url("/themes/wp-content/themes/enfold/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%;

background: pink;

}

Change the property values.

Regards,

Ismael

Hi,

Add a new layer, select Div/Video then add this code

<div id="caption-container-full"><div class="caption-container-full-center">

THE WORKPLACE OF THE FUTURE</div></div>

Set the animation on Options tab to Transition In/Out to Fade, duration to 0.

On Style tab set the following options.

Top: 410px (Adjust this according to the height of your slider)

Padding: 10px for each field (top left right bottom)

Font Size: 40px

Font Color: White

Custom Style Settings: width: auto; display: block; background: rgba(0,0,0,.5); position: relative; bottom: 0; text-align: center;

Then edit custom.css or Quick CSS, add this code

#.caption-container-full {

bottom: 0;

}



.caption-container-full-center {

display: block;

width: 1024px;

text-align: left;

margin: 0 auto;

}

You will have a responsive caption container.

Regards,

Ismael

Hi,

You should probably start now. :)

Edit css / base.css, find the #Typography section.

You can also add this on your custom.css or Quick CSS.

body {

font-size: 15px;

}

Regards,

Ismael

Hi,

I did some changes on your slide Chop > Slide #1. Unfortunately, I don’t have the time to change all your slides. I also use the actual html code for avia buttons. I added a class selector to make it unique.

NOTE: Images are much more responsive than text. Next time you create a slide, I suggest you use image text instead of actual text. To see an example, please Import the dummy data.

I added this on your Quick CSS

/* Advance Slider Style */

.fsn2-title { font-family: League Gothic; letter-spacing:2px; font-size:68px; font-weight:500; color:#ffffff; }



.fsn2-p { color: white; font-size: 15px; line-height:22px; margin-bottom:50px; }



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

.ls-layer > span { top: -10px; left: -5px !important; padding: 0 10px !important; }



.fsn2-title { font-family: League Gothic; letter-spacing:1px; font-size:20px; font-weight:500; color:#ffffff; line-height:10px; }



.fsn2-p { color: white; font-size: 10px; line-height:12px;margin-bottom: 10px; }



.ls-layer > span .avia-button.avia-size-large {  padding: 3px 10px; font-size: 11px; min-width: 80px; top: 15px;

}

}

Regards,

Ismael

Hi,

It is because you have an inline font-size of 50px and 30px. It is way too big for mobile devices. Give the <span> tag a unique css selector. Something like this:

<p style="text-align: center;"><span class="paragraph-1A">Example Content</span></p>

<p style="text-align: center;"><span class="paragraph-1B">Example Content More Content</span></p>

Then style it on your custom.css or Quick CSS

.paragraph-1A {

color: #333; font-family: 'League Gothic', auto; font-size: 50px;

}



.paragraph-1B {

color: #333; font-family: 'League Gothic', auto; font-size: 30px;

}

Then add Media Queries to target the span on mobile devices.

/*

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 */

.paragraph-1A {

color: #333; font-family: 'League Gothic', auto; font-size: 20px;

}



.paragraph-1B {

color: #333; font-family: 'League Gothic', auto; font-size: 10px;

}

}

Regards,

Ismael

Hi,

@juganrising: Thanks for the help. :)

@marjan2k: You can follow the links to fix the issue.

You can also add this on your custom.css or Quick CSS to fix the ovarlapping menu issue.

/*

Desktop Styles

================================================== */

/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */



@media only screen and (max-width: 1138px) and (min-width: 768px) {

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

padding: 0 6px;

font-size: 12px;

}

}

Regards,

Ismael

Hi.

2.) Your site is on maintenance mode, we would like to check the footer area.

3.) To change the menu font size and style, use this on your custom.css

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

text-decoration: none;

font-weight: normal;

font-size: 20px;

}

For the color, you can use this:

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

color: red;

}

Hover state color, use this

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

color: blue;

}

4.) To change the excerpt, edit the post, look for Screen Options (top right corner) and check the Excerpt option. You can place the excerpt manually. You can also use the <!–more–> tag. http://en.support.wordpress.com/splitting-content/more-tag/

Regards,

Ismael

Hi,

Please add this on your custom.css.

input[type="submit"] {

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%;

}

Cheers,

Ismael

Hi,

Please add this on your custom.css or Quick CSS

/*

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: 1024px) {

/* Add your Mobile Styles here */

.iconbox .iconbox_content .iconbox_content_title {

margin: 0 0 10px 0;

letter-spacing: 0;

font-size: 13px;

}



.iconbox_content p {

font-size: 10px;

}



}

Cheers,

Ismael

Hi,

Try this one.

body p {

font-size: 20px;

}

Regards,

Ismael