How to remove the responsive functionality from Elegant Themes Exlorable

If you have used Elegant Themes before you will know that they are full of bugs and quite poorly coded. Good news is there are resources like cssDorks to help you fix these issues. One problem with the Exlorable theme is that is not functional with mobile devices. Although Elegant Themes claim that it works without issue. You can see from this screenshot of their current demo that it does not properly.

A solution for Elegant Themes bugs

Although not ideal, there are so many bugs with the Exlporable theme that you may want to use another theme altogether. Or simply remove the mobile responsive functionality as this is where most of the bugs are.

To remove the responsive functionality from Exlorable

Open style.css and remove this code:

@media only screen and ( max-width: 1440px ) {
#et-slider-wrapper { width: 400px; top: 100px; }
#et-slider-wrapper .et-description { top: 74px; }
#et-slider-wrapper .viewport { width: 280px; height: 119px; }

#et-slider-wrapper:after { width: 394px; }
}

@media only screen and ( max-width: 960px ) {
#et-search, p#et-search-title, p#et-search-title span { background: none !important; }
#et-search { width: auto !important; height: auto !important; }
#et-search-inner { padding: 0 !important; }
#et-search-right { float: none !important; clear: both; text-align: left !important; }
#et_search_submit { background: #BBB8B8 !important; color: #111 !important; }
p#et-search-title { margin-bottom: 2px !important; }
p#et-search-title span { padding: 0 !important; text-shadow: none !important; }
#et-searchinput { width: auto !important; }
p#et_choose_posts, p#et_choose_pages, p#et_choose_date, p#et_choose_cat { float: none !important; }
#et-search-left { float: none !important; width: 100% !important; }

body.et_map_full_screen { overflow-y: auto; }

#et-slider-wrapper, .et-search-form, #et-list-view .et-date, #et-listings:before, #top-navigation { display: none; }
#et_main_map { height: 398px; }
body.et_map_full_screen #main-header { position: relative; z-index: 10; }
#filter-bar { position: relative; }
#et-list-view { position: relative; right: auto; width: auto; height: auto; }
#et-list-view .viewport, .overview li { width: auto; height: auto; }
#et-list-view .overview { width: 100%; position: relative; }
#et-list-view .scrollbar { display: none; }

.overview ul { width: 98%; }
.overview li { border-right: 1px solid #bfbfbf; -webkit-box-shadow: 1px 0 1px #dcdcdc; -moz-box-shadow: 1px 0 1px #dcdcdc; box-shadow: 1px 0 1px #dcdcdc; }
.overview .et-mobile-link { display: block; }

#main-header .container { text-align: center; }
#logo { float: none; }

#et_mobile_nav_menu { display: block; margin: 24px 0 0; padding: 22px 0 0; }

.et-normal-listings { display: none; }
.et-mobile-listings { display: block; }

#et_contact_right { width: auto !important; margin-left: 0 !important; float: none !important; clear: both !important; }
}

@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
.container { width: 730px; }
#left-area { width: 369px; }
#sidebar { width: 151px; padding-left: 45px; padding-right: 45px; }
#content:before { width: 241px; }
.footer-widget { width: 183px; }
.post-description { top: 67px; }
#main-area .et-description { top: 110px; }

.et_pt_gallery_entry { margin-left: 75px !important; }

#et_pt_portfolio_gallery { margin-left: -35px !important; margin-right: -20px !important; }
.et_pt_portfolio_item { margin-left: 19px !important; width: 201px !important; }
.et_portfolio_more_icon, .et_portfolio_zoom_icon { top: 50px !important; }
.et_portfolio_more_icon { left: 65px !important; }
.et_portfolio_zoom_icon { left: 106px !important; }

#et_pt_portfolio_gallery.et_portfolio_small { margin-left: -39px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_pt_portfolio_item { margin-left: 13px !important; width: 117px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon { top: 20px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon { left: 26px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon { left: 62px !important; }

#et_pt_portfolio_gallery.et_portfolio_large { margin-left: -42px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: 9px !important; width: 321px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 99px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 140px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 178px !important; }
}

@media only screen and ( max-width: 767px ) {
.container { width: 440px; }
#main-header .container, #filter-bar .container { width: 400px; }

#left-area { width: auto; float: none; padding: 43px; }
#sidebar, #content:before { display: none; }

#et-header-bg { height: 179px; }

.filter-type { display: block; margin: 0 0 18px; text-align: center; }
.filter-type ul { width: 360px; }
#et-filter { display: block; width: 100%; }

.post-description { top: 52px; }

.footer-widget { float: none; width: auto; margin-right: 0; }

.et-description h1, .post-description h2, .post-description h1 { font-size: 30px; padding-bottom: 2px; }
.meta-info, .et-description p { font-size: 14px; }

#et_main_map, #et-single-map { height: 180px; }
#main-area .et-description { top: 48px; }

.entry-post .post-thumbnail { margin: 0 -43px 52px; }
.entry-post:first-child .post-thumbnail { margin-top: -43px; }
#comment-wrap:before, #respond:before { left: -43px; right: -43px; }
#left-area .wp-pagenavi { margin-left: -43px; margin-right: -43px; }

.commentlist .children { padding-left: 0; }

.sitemap-col { float: none !important; width: auto !important; }

.et_pt_gallery_entry { margin-left: 98px !important; }

.et_pt_portfolio_item { margin-left: 79px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 380px !important; margin-bottom: 10px; margin-left: 44px !important; }
.et_portfolio_small .et_pt_portfolio_entry { float: left; margin-right: 15px; }
.et_portfolio_small .et_portfolio_more_icon, .et_portfolio_small .et_portfolio_zoom_icon { top: 30px !important; }
.et_portfolio_small .et_portfolio_more_icon { left: 38px !important; }
.et_portfolio_small .et_portfolio_zoom_icon { left: 77px !important; }

#et_pt_portfolio_gallery.et_portfolio_large { margin-left: -23px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: -4px !important; width: 404px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 109px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 155px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 195px !important; }
}

@media only screen and ( max-width: 479px ) {
#main-header .container, #filter-bar .container, .container { width: 280px; }

#left-area { padding: 37px 21px; }

.filter-type { display: block; margin: 0 0 18px; text-align: center; }
.filter-type ul { width: 240px; }
#et-filter { display: block; width: 100%; }

.et-description h1, .post-description h2, .post-description h1 { font-size: 24px; }
.meta-info, .et-description p { font-size: 12px; }
.post-description { top: 23px; }
#left-area .wp-pagenavi { font-size: 24px; }

#main-area .et-description { top: 19px; }

.entry-post .post-thumbnail { margin: 0 -21px 52px; }
.entry-post:first-child .post-thumbnail { margin-top: -37px; }
#comment-wrap:before, #respond:before { left: -21px; right: -21px; }

#commentform input[type="text"], #et-rating > div { width: 44%; }

.et_pt_gallery_entry { margin-left: 44px !important; }

.et_pt_portfolio_item { margin-left: -8px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 255px !important; margin-left: 0 !important; }

#left-area .wp-pagenavi { margin-left: -21px; margin-right: -21px; }

#et_pt_portfolio_gallery, #et_pt_portfolio_gallery.et_portfolio_large { margin-left: -39px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: 42px !important; width: 228px !important; }
.et_portfolio_more_icon, .et_portfolio_zoom_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 53px !important; }
.et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 70px !important; }
.et_portfolio_zoom_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 110px !important; }

#et_pt_portfolio_gallery { margin-left: -7px !important; }

.et_pt_portfolio_item.et_portfolio_small { margin-left: 20px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 255px !important; margin-left: 0 !important; }
}

then open functions.php and remove this

add_action( 'wp_head', 'et_add_viewport_meta' );

Read More

How can I change background color of WHMCS shopping cart bar

With the order forms templates, you can't use custom.css - you need to directly edit style.css - in your case, standard_cart/style.css and change the CSS code below:

#order-standard_cart .view-cart-items-header {
    margin: 0;
    padding: 8px 15px;
    background-color: #058;
    color: #fff;
    font-size: 0.9em;
    border-radius: 4px 4px 0 0;  

 

Read More

Change Colour of WHMCS Update Box

To change the colour of the Green Update box pictured on the right. Add the following CSS overrides:

.btn-success,
.btn-success:active,
.btn-success:focus { /* secondary button */
    color: #000;   
    background: #f0b945;
    border: none;
}

.btn-success:hover {
    color: #fff;   
    background: #f0b945;       
    border: none;
}

Read More

Hiding Client Home Page Knowledgebase Search Feature in WHMCS

Add the line below to /templates/six *or your custom template*/css/custom.css

 .home-kb-search {display: none;}  

Read More

Move DIVI Fullwidth Slider Text to Left or Right

Simply add the following CSS code to custom CSS box in theme options.

.et_pb_fullwidth_slider_0 .et_pb_slide_1 .et_pb_slide_description{
text-align:left!important;
}
.et_pb_slide_description {
float: left;
padding-left: 0;
width: 65%;
padding-bottom: 0px;
}
.et_pb_slider .et_pb_container {
max-width: 100%;
width: 100%;
float: left;
}

Read More

Make Divi fullwidth portfolio items not clickable

The fullwidth portfolio is a nice feature in DIVI. Especially the grid mode. You may not want each project to be clickable so to disable the links for projects with the fullwidth portfolio add the following code to custom CSS menu:

.et_pb_fullwidth_portfolio {
pointer-events: none !important;
}

Read More

Center Align Extra Widget Title Text

If you align images or text in the Extra theme footer widgets you  notice that the title text does not follow suit. Simply add the following CSS code to custom CSS box in theme options.

.widgettitle {
text-align: center !important;
}

Before

After

Read More

Center "Related posts" text in Extra DIVI Builder

Looking to center the text displayed on the "Related posts" at the end of the post?

Please add the following css code into custom css of your theme's epanel /Divi theme options

.related-post .title {
text-align: center !important;
}

Read More