Docs

[lypa]

Dear Themeco Team

I have tried to apply the block grid with five images on our recipe page (http://www.morga.ch/rezepte/), but it is not working (screenshot attached).

This is the code i used:

[vc_row class="man"][vc_column width="1/1"][block_grid type="five-up" class="man"][block_grid_item][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/vorspeisen.jpg" alt="Vorspeisen" link="true" href="http://www.morga.ch/rezepte/vorspeisen/"][/block_grid_item][block_grid_item][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/hauptspeisen.jpg" alt="Hauptspeisen" link="true" href="http://www.morga.ch/rezepte/hauptspeisen/"][/block_grid_item][block_grid_item][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/desserts.jpg" alt="Desserts" link="true" href="http://www.morga.ch/rezepte/desserts/"][/block_grid_item][block_grid_item][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/block_grid_item][block_grid_item][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/block_grid_item][/block_grid][/vc_column][/vc_row]

What went wrong?

Thank you and Kind Regards,
lypa

[Thai]

Hi There,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.a

[lypa]

This reply has been marked as private.

[Rupok]

Hi there,

I have checked and found that you are using four items and it’s working fine – http://prntscr.com/cys4ja

If you need to ad five then add one more item and change four-up to five-up.

Cheers!

[lypa]

Hi Rupok

Thank you for checking. Yes, i am using four-up – since five-up does not work and we can not have a “faulty” version online. But i would like to use five-up. If i write “five-up” i still get shown 4 items in a row and the fifth on the next row. I have applied it on our staging now, here: http://www.morga.ch/staging/?page_id=6650. Would you mind checking it again? Login data is the same.

Kind Regards,
lypa

[Friech]

Hi Lypa,

Sorry you’re having this issue, but the maximum number of columns in block grid is 4, It has been revamped to be responsive and provide greater flexibility in our layouts.

If you need a five columns grid, make the ROW 1/5 + 1/5 + 1/5 + 1/5 + 1/5 instead.

Thank you.

[lypa]

Hello Friech,

Thank you for your reply.

How can i make the row 1/5? Do i use [vc_row class="man" width="1/5"]? And then use this row shortcode five times wrapped around each element?

Sorry, i can not find this in the shortcode documentation… .

I tried it like this on our staging (http://www.morga.ch/staging/?page_id=6650):

[vc_row class="man"][vc_column width="1/5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/vorspeisen.jpg" alt="Vorspeisen" link="true" href="http://www.morga.ch/rezepte/vorspeisen/"][/vc_column][vc_column width="1/5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/hauptspeisen.jpg" alt="Hauptspeisen" link="true" href="http://www.morga.ch/rezepte/hauptspeisen/"][/vc_column][vc_column width="1/5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/desserts.jpg" alt="Desserts" link="true" href="http://www.morga.ch/rezepte/desserts/"][/vc_column][vc_column width="1/5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/vc_column][vc_column width="1/5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/vc_column][/vc_row]

But it still does not look right (i get 3 items in a row instead of 5). It seems to work with “1/6” though, but this is not what i want, since the images are becoming too small.

Would you mind giving me a hint?

Thank you,
lypa

[Christopher]

Hi there,

Update your code to :

[vc_row class="man"][vc_column width="1-5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/vorspeisen.jpg" alt="Vorspeisen" link="true" href="http://www.morga.ch/rezepte/vorspeisen/"][/vc_column][vc_column width="1-5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/hauptspeisen.jpg" alt="Hauptspeisen" link="true" href="http://www.morga.ch/rezepte/hauptspeisen/"][/vc_column][vc_column width="1-5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/desserts.jpg" alt="Desserts" link="true" href="http://www.morga.ch/rezepte/desserts/"][/vc_column][vc_column width="1-5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/vc_column][vc_column width="1-5"][image src="http://www.morgashop.ch/wp/wp-content/uploads/2014/09/paidol.jpg" alt="Paidol" link="true" href="http://www.morga.ch/rezepte/rezepte-mit-paidol/"][/vc_column][/vc_row]

Please add following code in Customize -> Custom -> Global CSS :

@media (min-width:767px){
.x-column.x-sm.vc1-5 {
    width: 16.8%;
}
}

Hope it helps.

[lypa]

Dear Christopher

Thank you for helping. I applied the code, but it shows no difference. Would you mind taking a look again here: http://www.morga.ch/staging/?page_id=6650 ?

Thank you,
lypa

[Paul R]

Hi lypa,

I went ahead and fix it for you.

http://www.morga.ch/staging/?page_id=6650

I change it to [vc_column width=”1-5″]

Thanks

[lypa]

Hi Paul,
Thank you very much!!
Kind Regards,
lypa

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts