Hej!

It looks great. Now everything is fixed and working as is should.

This is the final code that I have in the quick CSS:

@media only screen and (max-width: 768px) {
.avia-slideshow .avia-caption .avia-caption-title
{ font-size: 14px; }}
@media only screen and (max-width: 480px) {
.avia-caption {
bottom: -10px;
left: -18px;
padding: 0 20px;
width: 305px;
}
.avia-caption .avia-caption-title { margin: 0; }
}
@media only screen and (max-width: 480px) {
#top .avia-slideshow-arrows a { display: none; }
.avia-slideshow-dots {
display: none;
}
}}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #main .container_wrap:first-child .container {
width: 528px;
margin: 0 auto;
}
}

It solved the issue with the slider display in the mobile and on the tab keeping the dots and the arrows.
Maybe you should integrate it as a default option, just a suggestion…

One more thing that I would like to ask and it concerns the stretched layout for mobile devices. It works perfect on mobile but on my Samsung tab 7 it is blurry. Why and can something be done to make it same as on the mobile?

Thnx for the help.

Just Perfect. Many Many Thanks

I will share and tell everybody how good and fast is the support :)

Hi:

I suspect it has something to do with my child custom css here:

/*
Theme Name: Enfold Child
Description: A Child Theme for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

/* CBC CSS Changes */

/* Center Title of Portfolio Item */

.main_color .grid-entry-title {text-align:center;}

.main_color .iconbox_icon, .main_color .iconbox_top_icon {
background-color: #a81010 !important;
color: #ffffff !important;
border-color: #a81010 !important;
}

.iconbox_content_container {
font-size: 16px;
color: ;
}

.container_wrap.main_color.light_bg_color {
border: none !important;
}

.main_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

.alternate_color .avia-icon-list .iconlist_icon {
background-color: #a81010;
}

li:hover .avia-menu-fx, .current-menu-item>a>.avia-menu-fx, li:hover .current_page_item>a>.avia-menu-fx {
opacity: 1;
visibility: hidden;
}

/* Progress Bars */

.avia-progress-bar div.progress .bar {
background-image: none;
}

/* Enfold Map Plugin */

#top #main #map.avia-section .template-page {
padding: 0;
}
#map .container {
width: 100%;
padding: 0;
margin: 0;
}
#avia_google_maps-3.widget {
padding-bottom: 0 !important;
}
.map {
width: 100%;
}
#map .avia-builder-widget-area {
margin-bottom: -30px !important;
}

/*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/

#header{
background-color: white;
}

#header_main .container, .main_menu ul:first-child > li a{ height:134px; line-height: 134px; }

/* Menu Dropdown Width */

.main_menu .menu ul { width: 160px; }

#top .main_menu {
right: 132px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0;
}

.social_header .phone-info {
float: right;
padding-top: 40px;
}

.hr span {
border-color: #BCBCBC;
}

#top .social_bookmarks {
padding-top: 30px;
float: right;
}

#header_meta {
margin-top: -30px;
}

.fixed_header.social_header #main {
padding-top: 117px;
}

/*Add your own styles here:*/

I cleared all out of quick css. Take note of the logo size if that makes a difference.

The last social #4 twitter is the only one that shows up.

Thanks

Chris

Hi Yigit.

Thnx for the help. I was able to put some code together by looking at the different forum topics.

It solved my problem on the phone and tablet but there is one thing more that I would like to do. The pictures are to small and I wonder if they can be bigger?

Here’s the CSS code that I’ve assembled from different post. I’m a newbie so probably looks ridiculous but it works :).

@media only screen and (max-width: 768px) {
.avia-slideshow .avia-caption .avia-caption-title
{ font-size: 14px; }}
@media only screen and (max-width: 480px) {
.avia-caption {
bottom: -10px;
left: -18px;
padding: 0 20px;
width: 305px;
}
.avia-caption .avia-caption-title { margin: 0; }
}
@media only screen and (max-width: 480px) {
#top .avia-slideshow-arrows a { display: none; }
.avia-slideshow-dots {
display: none;
}
}}

Maybe you have better suggestions.

Thnx for you help I really appreciate it.

many many thanks for the quick reply.

The code you sent change the size but how can I change the font?

Thanks for the help. This is the code I used just in case anyone ever has a problem similar to mine:

@media only screen and (max-width: 479px) {
.responsive #socket .sub_menu_socket {
display: block !important;
width: 100%;
}

.responsive #socket .sub_menu_socket ul li {
float: none;
border-left: none;
text-align: center;
}

}

@media only screen and (max-width: 767px) {
.responsive #socket .sub_menu_socket ul li {
padding: 10px;
font-size: 15px;
}
}

Still does not work! http://imgur.com/a/JqFRb
Now we have lost the green current in the drop down as well as the main navigation current
The photographs have no longer the rollover marker but when one rollover the photograph still goes down except in “studieneriese”

Again here is the css for the Navigation – It is all VERY unclean but all from what you have given me added in bits and pieces. I do not know how to make sense of it:
/*NAVIGATION*/

/*ROLLOVER/CURRENT MENU DECORATION*/
.header_color .avia-menu-fx {
background-color: #7aa84a;
}
.header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-color: #7aa84a;
}

/*MAIN*/
.header_color .main_menu ul:first-child > li > a {
color: #d45226;
}

#top .main_menu ul.menu li a {
font-size: 14px;
}

/*MAIN NAVIGATION HOVER*/
.header_color .main_menu ul:first-child > li a:hover {
color: #7aa84a;
}

/*MAIN NAVIGATION CURRENT*/
.header_color .main_menu ul:first-child > li.current-menu-item > a, .main_menu ul:first-child .header_color > li.current_page_item > a {
color: #7aa84a;
}

/*MAIN NAV SUB NAVIGATION*/

.header_color .main_menu .menu ul li a {
color: #d45226;
font-weight: 600;
}

#top .main_menu .menu li ul a {
font-size: 14px;
line-height: 15px;
}

/*MAIN NAV SUB NAV HOVER*/
#top .header_color .main_menu .menu ul li>a:hover {
color: #7aa84a;
background-color: transparent;
}

/*MAIN NAV SUB NAV CURRENT

.current-menu-ancestor a {
color: #7aa84a !important;
}*/

/*SIDE NAVIGATION*/
.main_color .widget_nav_menu ul:first-child>.current_page_item {
background: transparent;
}

.main_color .sidebar .current_page_item>a {
color: #7aa84a;
}

.main_color .sidebar a {
color: #d45226;
}

.main_color .sidebar a:hover {
color: #7aa84a;
}

.sidebar {
font-size: 14px;
line-height: 17px;
}

.js_active .tab {
font-size: 14px;
}

+ css from quick css:

.current-menu-item.current-menu-ancestor > a {
color: green !important;
}

Great. The form fields are now the correct colors.

The initial table style you wrote did not work, but I was able to make the table background transparent by making a small change to your code.

Here is what worked (I moved the word table to the right side, instead of table#fstable)…

#fstable, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
width: 285px;
line-height: normal;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: transparent !important;
}

The word “important” is important :) It overrides something we cannot find apparently.

And a small thing – the select field (to choose a state) has a very light vertical bar at the far right. No biggie but would like to get rid of it. You can see that bar in the state field here – http://www.finalsmoke.net/order-form-1/ , but it does not exist in the state field in my page before using Enfold here – http://www.quithere.com/fsmokewp/order-form/

Thanks for your help so far, and hope we can solve it all the way!

Hi Josue… No change.

I think I am already applying transparent to <tr> with my table style here…

#fstable table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
width: 285px;
line-height: normal;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: transparent;
}

Somewhere, a light gray background (#F8F8F8) is being inserted into <tr>, or maybe individual <td>’s, or the table as a whole <table>.

Also, something is causing the input fields to be styled with light gray borders (#E1E1E1) and fonts (#919191), ignoring my black as shown in my form field styles here…

input.fsfield {
border: 1px solid #000;
color: #000;
line-height: normal;
padding: 2px;
background-color: #FFF;
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}

select.fsselect {
border: 1px solid #000;
color: #000;
line-height: normal;
padding: 2px;
background-color: #FFF;
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}

Any help is appreciated.

Also noticed there are alternating row colors in tables that I did not put in here: http://www.finalsmoke.net/order-form-1/

Enfold is doing some complex overriding of tables and input fields somewhere.

My css for tables (below), is not really being obeyed, nor is my css for input fields.

#fstable table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border-color: #000;
border-width: 2px;
outline: 0;
width: 285px;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: none;
}

Can you please show me how to counteract what Enfold is doing with tables and input fields so my own styles will come through?

Thanks.

Ok I have added h2 { font-family: Georgia, “Times New Roman”, Times, serif !important; font-size: 24px; } in Quick CSS but nothing happened.

Hi Ismael,

That CSS code does not work.

I would like the form fields in the order form at the right here:
http://www.finalsmoke.net/order-form-1/

to look like the original (before Enfold) here:
http://www.quithere.com/fsmokewp/order-form/

Because Enfold has overwritten the defaults for tables and input fields, the table holding the order form has a white background, instead of being transparent, the td cells are too spaced out, and the form fields are too large and without borders.

Below is my original CSS for input fields, and select fields. Is there a way to use these styles in Enfold, along with an unstyled table?

——————————–
input.fsfield {
border: 1px solid rgb(0, 0, 0);
color: #000;
line-height: normal;
padding: 2px;
background: rgb(255,255,255,0.5);
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}

select.fsselect {
border: 1px solid rgba(0, 0, 0);
color: #000;
line-height: normal;
padding: 2px;
background: rgb(255,255,255);
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}
—————————–

Thanks,
Scott

Nevermind…just added font-family: inherit; And that did the trick.

That worked, but why is the Google font I chose through the control panel not showing up in this section only? Looks like it is pulling Times New Roman instead.