wolverine VIP
Total posts: 102
08 Sep 2013 10:06

I have two fields off gallery and I wonder how can I line upp the image

thx for all help

Last Modified: 02 Mar 2014


pepperstreet VIP
Total posts: 3,837
08 Sep 2013 13:32

Can you give more details, please.

Which template(s) are you using?

Which view are you talking about?


wolverine VIP
Total posts: 102
08 Sep 2013 14:19

I using default template

Intro view

to the old resource you choise line but this option are not to cobolt

so how can I do so the images are on one line


pepperstreet VIP
Total posts: 3,837
08 Sep 2013 16:22

Just noticed that default fields and labels are placed in Definition Lists (DL, DT, DD).

I assume you are able to write and add basic CSS properties?! So, i would suggest to use CSS only, without altering your template markup, or writing a custom layout.

Try this:

  • Edit both Gallery fields

  • General Properties -> Field Class -> enter your CSS class i.e.: MyGallery1, MyGallery2 ******

    (actually you could use the same CLASS for both fields, because both will get the same property)

  • Field Label -> Hide Label

    (you might also use a custom class here, and hide it via CSS)

Now add your custom CSS classes to your main template CSS file,

or edit the CSS file of your Cobalt list template.

.MyGallery1,

.MyGallery2

{

float: left;

}

****** Obviously you can also use the build-in Bootstrap CSS classes for floating. Only available with a bootstrap powered template, or if you have turned on Cobalt compatibility mode -> Global config.

.pull-left

This predefined class should have the same effect! Just enter pull-left (without leading DOT!) in your Gallery fields -> Field Class


wolverine VIP
Total posts: 102
08 Sep 2013 23:08

it works but now it is too much room between the images, so how can I reduce this?

Thanks for any help


Sergey
Total posts: 13,748
09 Sep 2013 00:49

Why 2 gallery fields at all?


pepperstreet VIP
Total posts: 3,837
10 Sep 2013 14:12

it works but now it is too much room between the images, so how can I reduce this?

I can just guess. I would need a live site URL to have a look with FireBug or any similar dev tool.

Are you sure BOTH do float to LEFT?

It looks like one is floating right. Another reason could be a margin or padding from your template CSS.

Powered by Cobalt