Portfolio grid not displaying correctly when browser window is resized

11 replies · opened Jun 7, 2019

Aakozyrev_jdbitJun 7, 2019

Hi,
I'm using this template in a CMS site, where content is loaded dynamically and for the most part it all works great. So far there is one issue where on large monitors, where screen width is more than 1404 px it all shows correctly (see page-good.jpg). But when I resize browser's width to 1403 px or less it resizes portfolio incorrectly (see page-bad.jpg). Is it javascript that determines the height of the grid? How can I fix it? There is no live url for this page as the site is on a development machine behind firewall.

Aakozyrev_jdbitJun 7, 2019

Edit: reattaching images

SSemicolon WebSTAFFJun 10, 2019

Hello,

Apologies about the Inconveniences caused!

This issue appears to be the result of a JS Error. Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Aakozyrev_jdbitJun 28, 2019

I was able to fix most of the problems, but there is still one. When browser window is resized, the image slider doesn't resize images properly and it shows half of one slide and half of next slide.

Here is the site: https://staging.atamomentsnotice.com/

SSemicolon WebSTAFFJun 29, 2019

Hello,

This issue pertains to the Resize Event of the Browsers which are different from each other and also this issue is related to the Flex Slider Plugin. A real-world user will never resize the browsers to check your website, so when you reload the Pages of your Website, you will never experience this issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aakozyrev_jdbitJun 30, 2019

Are you serious? This is your answer to the flaws in your template?

SSemicolon WebSTAFFJul 1, 2019

Hello,

Apologies about the misunderstanding. But as we had mentioned earlier, this is not actually something that is controlled by Canvas's Codes but the Plugin's Code itself. Also, the reply above was from a UX Point of view.

Nonetheless, you can consider using the following JS Code at the bottom of the Page after the js/functions.js JS File Linking:

jQuery(window).on( 'resize', function(){
	setTimeout(function(){ $( '.flexslider .slide' ).resize(); },1000);
});

This should fix the slider sizing issue on resize. Hope this Helps!

Do let us know if we can help you with anything else or if you find any further issues.

Aakozyrev_jdbitJul 3, 2019

This code makes it even worse. It makes the site slow (ton of messages in the console). See attached.

You claim your template is responsive, but it's not. I need help fixing this.

Aakozyrev_jdbitJul 3, 2019

I used this instead and it seems to fix the problem...
<script>
var resizeTimer;
jQuery(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
$('.flexslider .slide').resize();
}, 250);
});
</script>

SSemicolon WebSTAFFJul 5, 2019

Hello,

Apologies about the Inconveniences and thanks for pointers on improving the Slider Resize on Browser Resize!

You claim your template is responsive, but it’s not.

We can assure you that the Template is responsive and we have disabled many of the functionalities of 3rd Party plugins on Browser Resize as it affects the overall UX. Additionally, we would request you to provide us with a Live URL of the Page that has the similar issue as yours and we will definitely try fixing it at the earliest.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Aakozyrev_jdbitJul 7, 2019

I provided live url before. It's staging.atamomentsnotice.com. Home page is the one that has portfolio grid with flex slider.

SSemicolon WebSTAFFJul 8, 2019

Hello,

We meant a Live URL of Our Live Previews where you are facing the same issue. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard