Shape 5

Joomla Templates => No1 Shopping - Club => : phnu April 16, 2015, 12:39:42 PM



: Custom HTML module in the toprow1_2 position
: phnu April 16, 2015, 12:39:42 PM
Hello,

I would like to have the same custom HTML modules in the toprow1_2 position like they have on sample data site. These modules are responsive there. I have pasted their HTML code to my site (http://www2.mystove.ru) and changed it accordingly. Here is the modified one:

:
<div class="s5_is_css_5">
<div class="s5_is_css_wrap_5">
<h3>?Самарканд?</h3>
<div class="s5_is_css_hidden"><a href="catalogue/pechi-kazany/samarkand-details.html">по цене <strong style="color: #ddad00; font-weight: 900;">14 250</strong> ₽</a></div>
</div>
<img style="height: 185px!important; text-align: center!important;" src="images/stories/virtuemart/product/982142210.jpg" alt="" />
<div class="s5_is_slide_css">&nbsp;</div>
</div>

I have two issues:
1. The first one is that on browser window resizing that modules are not responsively resized either. I think it's because I specified the height of the embeded image directly with a style attribute. I had to do that, otherwise the image was displaying at its full height, breaking a good looking layout of the template.
2. The second one. I see a small part of the image that is not covered by a gray box. I do not know how to cover it completely.

Thank you in advance.

Regards,
Paul.


: Re: Custom HTML module in the toprow1_2 position
: mikenicoll April 16, 2015, 09:22:40 PM
Hello,

1) Specifying a height value in pixels with a !important call isn't going to work for responsive. You need to use % widths so it can scale to the container and not be a forced width value. You can also try leaving the images at the default size or cropping them before uploading. Then enable the equalizer script in the Template Manager under Javascripts.

2) Try adjusting this value below to 100% instead of 102%

:
s5_info_slide.css - line 478

.s5_is_css_6 .s5_is_slide_css {
    background-color: #000000;
    color: #ffffff;
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 1;
    position: absolute;
    transform: translateY(-100%);
    width: 100%;
}


: Re: Custom HTML module in the toprow1_2 position
: phnu April 17, 2015, 11:23:00 AM
Mike,

2. It has worked like a sharm. Great. Thanks for your help.

1. For that issue it is still a problem. I have tried to use % widths for images in both upper and lower modules. (It is a little bit confusing to me to use width to adjust height.) You can see in real. Having widths the same (31%), the modules' heights are not the same.

I tried to turn on the Equalize heights option. The layout became even worse. The entire row height increased to the sum of the initial images in both modules. So it did not help me. I need to justify the upper and lower modules to the top and bottom of the info slider.

What else I could try out?

Regards,
Paul.


: Re: Custom HTML module in the toprow1_2 position
: mikenicoll April 19, 2015, 11:12:04 PM
Hello,

They aren't connected so you can't really match them up without using the equalizer script. You could maybe try manually resizing the images offsite to equal the height of the image slider but the thing with responsive is the Image Slider is going to change in height based on the resolution which will make the other 2 modules not match up properly.