Course Module

[liamsiviter]

Hi, On my frontpage I have the 'Post Grid' module, and it's displaying my most recent courses, on a desktop/laptop is shows in 4 columns which looks great. However, on a tablet and phone they show up in one column, and the images are really blurry as it's super enlarged and it also makes the page really long. Desktop: https://www.awesomescreenshot.com/image/2832129/b705cbe51e3d67dc5506a70bfbf36bb9 Tablet: https://www.awesomescreenshot.com/image/2832148/2f3b980cfb56177c9832657a345ad469 It really needs to go to a two column menu for tablet size, and one column for mobile? So how can I make it two column for tablet? Or I'm open to any suggestions that would solve my previous issues. Many thanks in advance, much appreciated.    

[liamsiviter]

This reply has been marked as private.

[H.K. Latiyan]

Hi, Yes this can be done by adding the class on the grid. You can edit the vibe-editor.php file in vibe custom types plugin and then add the class "col-sm-6" with "col-md-3" class. You can refer the path and the line number in this screenshot: http://prntscr.com/gnwuwn

[liamsiviter]

Hi H.K Latiyan, I did this please see: https://www.awesomescreenshot.com/image/2835182/72c0d7997affa12d738b5ca9df3341ef But it didn't have any affect. It still goes straight to one column on both tablet and mobile and not two columns? Thank you, Liam.  

[H.K. Latiyan]

Hi, Try clearing your cache because in your website the col-sm-6 class has not been added , refer: http://prntscr.com/gon60a You can check this by inspecting your website through google chrome inspecter. If you add class col-sm-6 in the <li> element then it will show 2 blocks in tab view.

[liamsiviter]

This still isn't working, it is showing in my vibe-editor.php file, but I cannot see it in google inspect -  please see new screenshot - what can be the issue? https://www.awesomescreenshot.com/image/2926022/27219f5f53a1e1785e8e33bd2ea78a55 Many thanks, Liam.

[Diana]

@liamsiviter, Please Go to wp_admin-> Appearance -> customize -> custom css and paste this css in the editor @media only screen and (min-width: 767px) and (max-width: 1281px){ .vibe_grid ul.grid li.col-md-4{ width:50% !important; clear:none; float:left; } .vibe_grid ul.grid li.col-md-4:nth-child(2n+1){ clear:both !important; } }

[liamsiviter]

This worked thank you very much.

[Author]

Posts