Joomla Templates Club 406,261 posts

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#206560

Hello
Is it possible to switch from 3 columns on desktop to 2 columns on tablets and then to 1 column on small devices instead off switching directly from 3 columns to 1 column (in the ja-bookshop template) when showing articles in 3 column blog layout on smaller devices?

best regards

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#571706

Hi @kjkhere,

Because it depends on the way you arrange your layout, content and HTML structure. For example some customers want the left column wider while others want the right column, then it’s hard to detect which column is wider or both left / right column is wider then the content and arrange them.

So we just use the default responsive behavior from Bootstrap, it’s not the best but it will work in most cases.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#736752

Hi @kjkhere,

Because it depends on the way you arrange your layout, content and HTML structure. For example some customers want the left column wider while others want the right column, then it’s hard to detect which column is wider or both left / right column is wider then the content and arrange them.

So we just use the default responsive behavior from Bootstrap, it’s not the best but it will work in most cases.

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#571825

Thank you Adam – but honestly I did not understand the answer.
I have all the columns in the same size.
My ” problem ” is the great column in the second row , I’d like to have 2 small columns instead of this.
But I do not know how to change the exsting bootstrap to obtain these.
🙂

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#736871

Thank you Adam – but honestly I did not understand the answer.
I have all the columns in the same size.
My ” problem ” is the great column in the second row , I’d like to have 2 small columns instead of this.
But I do not know how to change the exsting bootstrap to obtain these.
🙂

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#571977

Hi @kjkhere,

Could you please provide your site url and provide a mockup screenshot about your desire result so I can assist better ?

1 user says Thank You to Adam M for this useful post

1. kjkhere

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#572015

Hello Adam – some screenshots:

this 2 rows I want to get:

this way the template works:

😉

---

Attachments:

1. 
2. 

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#737060

Hello Adam – some screenshots:

this 2 rows I want to get:

this way the template works:

😉

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#572228

Hi @kjkhere,

Please open file /templates/ja_bookshop/css/custom.css then add this code :

@media (min-width: 480px) {
.blog-featured .col-sm-4 {
display: inline-block;
vertical-align: top;
width: 49.5%;
}
}

1 user says Thank You to Adam M for this useful post

1. kjkhere

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#737268

Hi @kjkhere,

Please open file /templates/ja_bookshop/css/custom.css then add this code :

@media (min-width: 480px) {
.blog-featured .col-sm-4 {
display: inline-block;
vertical-align: top;
width: 49.5%;
}
}

1 user says Thank You to Adam M for this useful post

1. kjkhere

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#572264

thank you Adam – I think this is the right way.
But now the template starts with two columns – so I have to modify your code – so that it starts with 3 columns and than changes to 2 columns on smaller devices.
But now I see how to do it.

---

Attachments:

1. 

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#737301

thank you Adam – I think this is the right way.
But now the template starts with two columns – so I have to modify your code – so that it starts with 3 columns and than changes to 2 columns on smaller devices.
But now I see how to do it.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#572295

Hi @kjkhere,

Glad to hear that you figured it out. If you still have any question or need further assistance, feel free to let me know.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#737332

Hi @kjkhere,

Glad to hear that you figured it out. If you still have any question or need further assistance, feel free to let me know.

[kjkhere Friend kjkhereJoin date: November 2009Posts: 18Downloads:34Uploads:7 Thanks: 8 Thanked: 2 times in 2 posts]

#572319

Tanks Adam – I’ll try it –
another problem, since days/ weeks : http://www.joomlart.com/demo/#ja_bookshop LIVE-DEMO is not working ??
why?
:((

[Author]

Posts