3 columns Layout 50%-25%-25% is not responsive

Hi,

Could you please provide a screenshot or clarify your problem a little bit so I can assist you better ?

Yes,

now situation is if we design a page with a row having 3 columns with width set as –
1st Column – 50% width
2nd Column – 25% width
3rd Column – 25% width

When we check the page on screens having width ranges > 768 and < 992
the row gets divided in 2 rows
1st row
1st Column – 75% width

2nd row
2nd Column – 33.33% width
3rd Column – 33.33% width

This leaves the some space unused.

What ideally should have been is

1st row
1st Column – 100% width

2nd row
2nd Column – 50% width
3rd Column – 50% width

Hoping these details makes more sense.

==============================================
I tried to get insight of this behaviour. The exercise of analyzing this issue lead me to wonderful concept of bootstrap responsive css, js. I am grateful to you for utilizing this nice concept.

Our code have tried to make generic use of this library; so we are using a general formula for setting up columns width using bootstrap css classes for ‘sm’ (width ranging between 768 and 992) screens using ‘function function element_shortcode’. (file: ig-pagebuilder\core\shortcode\layout\column.php)

Formula used :
$span_sm = intval( $span * 3 / 2 ); [line 77]

Now this formula is NOT ‘100%’ optimal for case like above and many more.

==============================================
Suggestion : Since IG page builder gives flexibility of using 12 spans in any possible way, we may not want restrict the columns structure to some fix choices as some other page builders do.

Still we may try to provide a better proportions for some common layouts like (50%-25%-25%, 33%-33%-33% etc.)

Hi androidanit,

Thanks for your suggestion, I passed this matter to development team to see if we can improve this part in our next version. Back to your case, you can open your theme stylesheet file and add these rules to temporary get your desire layout between resolution 768 – 992 :

@media all and (max-width: 992px) and (min-width: 768px) {
	.jsn-bootstrap3 .col-md-6 {
		width: auto !important;
	}
	.jsn-bootstrap3 .col-md-3 {
		width: 50% !important;
	}
}

Thank you for quick and clean solution…

Hi,

Glad to hear that you’re satisfied with the result.

If you don’t mind, I would like to ask you a favor. Since your opinion matters to us and to other customers, we’d be really appreciative if you could take a few moments to review your experience.

In addition, we’re running a promotion campaign for IG Page Builder. We will offer our special give-away program for 100 lucky participants who register (it’s free) from 12th to 16th May (EST). If you love IG Page Builder, you won’t want to miss it.

Best regards,

Adam.

Side topic: Adam? If you are a plugin support person can you arrange for the plugin author to get listed as a “Plugin Contributor”? It’ll make it easier for members to realize that you’re “official”.

Also your local neighborhood support moderator will thank you if you do. ??

Hi Jan,

My bad, I almost forgot that part. I’ve sent a request to update my account as Plugin Contributor. Thanks

Yes Adam, it is my pleasure to review IG Page Builder. I have already enrolled for special give-away program. Hoping to be lucky ??

Hi androidanit,

Many thanks for your kind words. If you still have any question or need further assistant, don’t hesitate to let us know.

Best regards,

Adam.

sure, thanks Adam