Reducing Height of Intelligent Shoe Module

12/3/2015 version of quark ecommerce quick install
[url]working site: www.ahgoobaby.com/Redesign3[/url]

Is there a way of reducing the height of the intelligent shoe module? I like the way it currently looks but it takes up too much vertical space on the home page. There is currently too much excess space above and below the text to the right and the image on the left is too large proportionate to the header module. Ideally it would be about 75% of the current height. Please be sure to advise so that the change is consistent across all responsive display views.

Thanks.

Hi

Add this to override.css

Code: Select all

.big-photo .big-photo-desc {
padding: 100px;
}

@media only screen and (max-width:1460px) {
.big-photo .big-photo-desc {
padding: 80px;
}
}

@media only screen and (max-width:1040px) {
.big-photo .big-photo-desc {
padding: 50px;
}
}

@media only screen and (max-width:640px) {
.big-photo .big-photo-desc {
padding: 25px;
}
}


I used example values, so You may need to adjust them.

I added it but it has no effect. I adjusted each of the views down to 20 px and still no impact at all. I thought possibly it was the image size that was forcing the height, so I took out the image and still no impact. All i really want is to adjust the height of the intelligent shoe module down. If I need to have the max width to something specific for my site, how do i know what to change it to so that the override has an impact?

Hi

I cannot see my code on Your website and override.css is empty: http://www.ahgoobaby.com/Redesign3/temp ... erride.css

Please make sure recompiling less is disabled. This option may overwrite all css and make changes not being processed.

Hi. I have the same problem, apply the CSS code without any changes, could please fix the code, thanks, greetings. René

I can confirm my recompile less is disabled, so problem remains.

Hi

@gtelegadis please send me an access to Your joomla panel.

@NETsystem.tv I added this code to Your empty override.css file and code is there now. So I really do not know what was the problem with disappearing code.

Hi. Just add the code, as it was not present in the CSS, I apologize, but, I do not understand why. Could you tell me what parameters change in the code to reduce the height of the module and image zoom, somewhat lower. I tried, but no change. Thanks greetings. René.

teitbite - I PM'd you on the 15th with my backend admin access. Please let me know when you've had a chance to see why your changes are not implementing.

Hi

@gtelegadis I could not find the code I asked to add anywhere, so I've copied it to Custom CSS field. Looks to be working fine.

Hi, in my case, I have the code in the CSS, also modifiche some parameters such as padding, but it does not work, that is, it remains all the same size ... Moreover, in the circles to click, where Demo always a sign of "+", in my case this sign does not see any solution ?, thanks, greetings ...

Teitbite - thank you for the update, but I'm not seeing any change in the front end height to this module. Specifically, I'm looking to reduce the amount of gold space above and below the text in the right box so that I can reduce the overall unnecessary vertical space this module is taking up on the home page. If the code is working as you indicate, please let me know what / how I need to amend it to reduce the blank gold space / height only of the module (shorten the height while still keeping the full template width of the module). I'm presuming doing that will proportionately reduce the image size in the left box, but if I need to resize the image I'm fine with that. Just help me understand how I would ultimately achieve the desired result above.

Hi

I do not know what to tell You. Here is Your site without my code and with it. The difference is 100px, but You can reduce it further. Code is copied to Custom CSS field in template settings.

Hi. I have exactly the same problem and others. I just published a new post, then maybe my problem is different .... thanks, greetings. René

where exactly do I need to add this to? the override css in the advanced tab in the templates menu or is it a special file somewhere that I need to download and add the code? Thanks - I will try and include less padding. As well, can you tell me whether the uploaded height of the image on the right will prevent the padding from being reduced if the image is over a certain pixels high? I'm presuming if the padding in your code is reduced it will auto reduce / scale down the image proportionately, but if the padding is not being reduced because the height is capped by the image height, maybe I need to reduce that as well?

Hi

Best to try this code in Custom CSS field in template settings since it has higher priority.

Image is an item stretching the height, but it's set to fit while occupying 50% of screen. So play with padding in my code first. It should be enough for most screen widths.

Hello, in my case I have the code in the CSS template settings and it does not work. Could you tell me what parameters should I change ?, thanks, greetings ...

Hi

I can see this code in /css/override.css

Code: Select all

.big-photo .big-photo-desc {
    padding: 100px;
}
@media only screen and (max-width: 1460px) {
.big-photo .big-photo-desc {
    padding: 80px;
}
}


as You can see it's 100px and 80px in smaller devices. I believe this values are too high and there is not enough difference between them to notice it, but I can see it works. Please chenge this values till You will feel it's working fine.

Hi, I tried the code and confirms that it works and I think it has always worked well, because the problem that the changes are not visible, depends not only on its code, but depends also, surely has preoridad the following code, this in the module: "Intelligent Shoe"

<Div class = "big-photo">
<Div class = "big-photo-img"> <img src = "/ images / demo / ecommerce / shoes_bg.jpg" alt = "" /> <span class = "big-photo-button-overlay-button gk" style = "top: 20%; right: 30%;" data-sr = "scale up 30% over .75s and wait .5s"> <span class = "big-photo-button-popup"> <img src = "/ images / demo / ecommerce / popup_img1.jpg" alt = "" /> <strong> Free Powerliners </ strong> <small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Small> </ span> </ span> <span class = "big-photo-button-overlay-button gk" style = "top: 70%; right: 10%;" data-sr = "scale up 30% over .75s and wait .8s"> <span class = "big-photo-button-popup"> <img src = "/ images / demo / ecommerce / popup_img2.jpg" alt = "" /> <strong> Round Shoelaces </ strong> <small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Small> </ span> </ span> </ div>
<Div class = "big-photo-desc">

<H2> -APRI IL TUO "FESTAGRATIS" SHOP </ h2>
<P> </ p>
<H2> FRANCHISING body formula + </ h2>
<P> </ p>
<H2> -ROYALTY SUL FATTURATO = € 0.00 </ h2>
<P> </ p>

<Span class = "big-photo-button" data-sr = "scale up 30% over .75s and wait 1.1s"> <span class = "big-photo-button-popup"> <img src = "/ images /demo/ecommerce/popup_img3.jpg "alt =" "/> <strong> Eco Cowhide </ strong> <small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Small> </ span> </ span> </ div>
</ Div>

* I confirm that I resolved only by eliminating lines of text, because if I do not change and continuous image are still very large ...

<H2> -APRI IL TUO "FESTAGRATIS" SHOP </ h2>
<P> </ p>
<H2> FRANCHISING body formula + </ h2>
<P> </ p>
<H2> -ROYALTY SUL FATTURATO = € 0.00 </ h2>
<P> </ p>

** Now that this problem is solved, I need only to insert a link like "CONTACT US" associated with these lines of text and I need the first line of text starts below and not attached to the top edge ...

Thank you very much, greetings ...

Try maybe like this:

Code: Select all

<p></p>
<h2>-APRI IL TUO "FESTAGRATIS" SHOP</h2>
<p></p>
<h2>-FORMULA FRANCHISING+</h2>
<p></p>
<h2>-ROYALTY SUL FATTURATO = € 0,00</h2>
<p></p>
<p style="text-align: center"><a href="###">Contact</a></p>


Hello, thank you, now everything works fine. Only one point achievement not solve. In the demo, each black circle d eColor has a plus sign in the center, which guides the end user ... in the template installed, the plus sign is not present ... Attached images to illustrate the difference .. . Any solution ?, thank you, greetings ...

INT_SHOE_DEMO.jpg

INT_SHOE_NOT_OK.jpg

Netsystem.TV - can you clarify exactly what text was original text and what text is the final changed text so that I can get this working as desired on my site?

Thanks,

George

Hi George, you must do 2 things, first it is to eliminate all this code in the module "Intelligent Shoe" and copy this new code:

-------------------------------------------------

<div class="big-photo">
<div class="big-photo-img"><img src="/images/demo/ecommerce/shoes_bg.jpg" alt="" /> <span class="big-photo-button gk-overlay-button" style="top: 20%; right: 30%;" data-sr="scale up 30% over .75s and wait .5s"> <span class="big-photo-button-popup"> <img src="/images/demo/ecommerce/popup_img1.jpg" alt="" /> <strong>Free Powerliners</strong> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small> </span> </span> <span class="big-photo-button gk-overlay-button" style="top: 70%; right: 10%;" data-sr="scale up 30% over .75s and wait .8s"> <span class="big-photo-button-popup"> <img src="/images/demo/ecommerce/popup_img2.jpg" alt="" /> <strong>Round Shoelaces</strong> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small> </span> </span></div>
<div class="big-photo-desc">

<p></p>
<a href="/contattaci.html" target="_blank"><h2>-APRI IL TUO "FESTAGRATIS" SHOP</h2></a>
<p></p>
<a href="/contattaci.html" target="_blank"><h2>-FORMULA FRANCHISING+</h2></a>
<p></p>
<a href="/contattaci.html" target="_blank"><h2>-ROYALTY SUL FATTURATO = € 0,00</h2></a>

<span class="big-photo-button" data-sr="scale up 30% over .75s and wait 1.1s"> <span class="big-photo-button-popup"> <img src="/images/demo/ecommerce/popup_img3.jpg" alt="" /> <strong>Eco Cowhide</strong> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </small> </span> </span></div>
</div>

--------------------------------------------

The second thing you have to do is copy the CSS Template configuration of this other code:

#gkBottom1 .big-photo-desc {
padding: 15px;
}

@media only screen and (max-width: 1460px) {
#gkBottom1 .big-photo-desc {
padding: 10px;
}
}

@media only screen and (max-width: 1040px) {
#gkBottom1 .big-photo-desc {
padding: 5px;
}
}

@media only screen and (max-width: 640px) {
#gkBottom1 .big-photo-desc {
padding: 1px;
}
}

I hope I have been helpful, thank you, greetings from Italy. René

Hi

For the plus sign I've just noticed that there is a line of code missing before popup code in module:

Code: Select all

<span class="big-photo-button-preloader"></span>


Please add it to rest of the popups.

Ok, thanks, now works fine, greetings ...

Hi

Great to hear that Closing this thread than.