Forum Support

Shape 5
March 29, 2024, 04:06:27 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Custom HTML module in the toprow1_2 position  (Read 374 times)
phnu
Jr. Member
**
Offline Offline

Posts: 6



« on: 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:

Code:
<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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: 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%

Code:
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%;
}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
phnu
Jr. Member
**
Offline Offline

Posts: 6



« Reply #2 on: 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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: 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.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.