Hi, some images in the template are responsive by default. For example, homepage banners – with 1220 or 1680 pixels wide, they look perfect on small screens.

In general, you can do like this:

1) layout (see index.html, “Feature Boxes with top icon”, as an example):

<article>
   <a href="#" class="responsive-img">
      <img src="images/feature6-420x236.jpg" alt="" class="normal-dpi" />
      <img src="images/feature6-840x472.jpg" alt="" class="high-dpi" />
   </a>
   ...
</article>

As you can see, you need to add the “responsive-img” class to the image container.

2) CSS (add it at the end of layout.css, for example):

.responsive-img > .high-dpi {
    display: none;
}

/* for high-resolution devices */
@media (-webkit-min-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (min-resolution: 1.5dppx),
       (min-resolution: 144dpi) {
    .responsive-img > .normal-dpi {
        display: none;
    }
    .responsive-img > .high-dpi {
        display: block;
    }
}

Hope this will help you.

Hello,

1) Add the following CSS to “Portfolio” section in layout.css:

#portfolio-wrapper article {
    padding-bottom: 0;
}

2) Add “remove-bottom” class to the last portfolio item. It should look something like this:

<div class="one-half columns portfolio-item-preview remove-bottom">

3) Add new “mb-min-768px-remove-bottom” class to the one before last portfolio item. It should look something like this:

<div class="one-half columns portfolio-item-preview mb-min-768px-remove-bottom">

4) Add the following CSS to “Misc” section in base.css:

@media only screen and (min-width: 768px) {
    .mb-min-768px-remove-bottom {
        margin-bottom: 0 !important;
    }
}

Figured it out… looks like the top bar social icon uses Font Awesome, and some of the social icons, believe it or not, are removed by AdBlock. I turned off AdBlock for the page and the social icons show up again. How very annoying.

1) Add your mobile logo to Media Library.

2) Add the following styles to the “Custom CSS” field (Theme Options > Styling):

@media only screen and (max-width: 767px) {
   .responsive #logo .normal-dpi {
      display: none;
   }
   .responsive #logo a {
      width: 250px;
      height: 50px;
      margin-top: 10px;
      background: url(http://e-merald/themes/emerix-wp/wp-content/uploads/2016/07/mobile-logo.png) no-repeat left top;
   }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3/2),
   only screen and (max-width: 767px) and (min-resolution: 1.5dppx),
   only screen and (max-width: 767px) and (min-resolution: 144dpi) {
   .responsive #logo .high-dpi {
      display: none;
   }
}

Note: width and height – dimensions of your mobile logo, url should be replaced with the absolute URL address of the mobile logo you uploaded to Media Library.

thanks so much! it works!!

Glad I could help you.

Okay crap so I see I purchased the wrong template.. I needed the wordpress.. any option to swap it or get a refund on this one??? Thanks ..

Hello, you can request a refund, then I will approve it, and you will get your money back in 3-5 business days.

Thanks so much for your quik reply! I requested a refund and also bought the wordpress theme already! it’s an amazing theme! Thanks

Sorry! I founded !!! Regards,

Hello Adelina,

Glad you could find the answer If you have any other questions, please let me know.

Hello Michael,

This is not a WordPress theme, it is an HTML5 template (as well as all files in the “HTML” section on Themeforest.net). The Emerix WordPress theme is available here.

Regards, emerald

Hi Mike,

<div class="widget" data-smallscreen="no">

#main-content.page-right-col {
   margin-top: 0;
}

Could you tell me how to change hover color of simple menu

#primary-nav #main-menu > li > a:not(.current):hover {
   color: #fff !important;
}

It works perfectly. Thanks a lot.

It seems like the JavaScript code related to “Contact/Comment Form” in custom.js is not working on your page. This can be caused by one of the following: 1) the custom.js file is not included in your html page code and is not loaded, 2) the value of contact form’s id is not “contact-form”, 3) something causes an error in custom.js and disables the rest of JavaScript code in this JS file.

Unfortunately, there is no an easy way to disable the responsive mode in the template.

Hi,

It’s in the grid.css... but I would not recommend you to modify this file. You will have to completely rebuild the grid (recalculate the widths of columns) and probably make some changes in the layout.css if you want to change the width of the main content.

Good to know I think I will leave it as is. Thank you for your quick response. Have a great day!

Hello. This is not the Emerix template.

I can reproduce this in any browser. The last testimonial page is blank for me and my customers. See the screenshot https://yadi.sk/i/u2ZW9trjkAt2A

I will certainly fix it and provide you with the solution as soon as I can reproduce the issue.

OK, this is strange. For instance, for me it is reproducible with Firefox 41.0.2. But this is not a major issue fortunately.

Hello,

You will need to customize your html file and custom.js (“Google Maps” section). It will look something like this:

<div id="map1" class="google-map"><span>loading map...</span></div>
...
<div id="map2" class="google-map"><span>loading map...</span></div>
<script>
   // Custom parameters for Google Maps
   var gm_params1 = {...};
   var gm_params2 = {...};
</script>

var $gmap = $('#map1, #map2');
...
if (typeof gm_params1 != 'undefined') { ... }
if (typeof gm_params2 != 'undefined') { ... }
...
map1 = new google.maps.Map(document.getElementById('map1'), mapOptions);
map2 = new google.maps.Map(document.getElementById('map2'), mapOptions);
...