Hi Yigit,

Yes, I checked that out. However that is not an suitable solution as it takes up quite a bit of screen real estate. Best to have it hidden and appear at the top the mobile slide-out menu. Maybe it could be triggered by the magnifying glass icon at the top of the slide-out menu?

Thanks for your help!

If possible, I would simply like the button to appear the way it’s shown in the editor, without having to patch the css.

Were you able to find out why it appears differently on the live page?

Same issue with the tabs as I explained here:
https://kriesi.at/support/topic/tabs-look-different-on-live-page/

Text inside tabs in editor is red in first tab, blue in second tab, purple in third tab. But on live page, all tabs show only black text.

Same issue with button inside Promo Box. Button is missing border color, gradient background, font color, etc.

Any ideas?

I also read this post but totally don’t understand the code:
https://kriesi.at/support/topic/sorting-order-for-gallery-images/

I guess they have done it here:
http://www.kafkagranite.com/wp/epoxy-overlay-aggregates/streetscape/#tab-id-1

But I like the general preview style that comes with the theme, and would like the filmstrip/thumbnails below.

Cheers!

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.

Hi:

OK that’s done. Have this in quick css:

#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 Colors*/
.hr span {
border-color: #BCBCBC;
}

Top bar is still showing with social on top.

Thanks

Josue,

That worked, the only thing that happened was the Phone number seems to be floating on the right in mobile view? How do I get it to position centered above the Logo?

Also, I need the background to be white where the phone number goes on the top.

How could I add this image alongside of the phone number in line with it http://bit.ly/1mVqzEt it looks a little dry the way it is right now and need to make sure the image looks ok at the top in mobile view too.

Thanks!