Discussion on Emerix - Responsive HTML5 Template

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

Sorry! I founded !!! Regards,

Hello Adelina,

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

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

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.

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.

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

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.