Formatting columns/multi-columns

[micha1451]

Hi,
I’ve done a page with 4 columns. I put in the code in page editor and modified depending CSS.
In each of the columns text is included as well as images (…or galleries).

Link to this page

In slim-browser the top-position of the gallery looks different to that of firefox. This looks poor…
How can I fix vertical positions?  e.g: “The gallery starts vertically at 600 px,
independently to the text before”.

A second question:
I like Visual Lightbox a lot. But one issue, I didn’t found nowhere: Is it possible to show only one thumbnail instead of twenty?
Especially for a gallery inside columns this would be very helpful. I don’t know, how I can access and modify this “blackbox”: [visuallightbox id="46"]
Can I solve this issue possibly with weawer xtreme?

Thanks and regards
Michael

[Weaver]

 As you decrease the width of the columns, the images in the column are being clipped on the right side – the height stays the same, and the right side just gets clipped off.

They most likely get clipped because each column must have overflow hidden.

This is not necessarily the worst solution, but specifying a max width in % for the images in a column would cause the images to shrink in both directions as the width decreased.

Since the images seem to be wrapped by visual lightbox styling, changing to % would have to apply to its rules. It looks like the images in a visual lightbox group are not styled all that intelligently – the group is in an ID called #vlightboxnn and each image as a class .vlightboxnn, where nn is a 2 digit number that is different for each group of images.

Perhaps you are creating the ID yourself – your example says id=46, so that may be the source.

You would need a custom class for each group ID to change the img styling to be % based.

[scrambler]

1- Are you saying that your problem is the fact that because the text at the top of each column is of different lengh, the Top of the first image in each columns are not aligned?

if so, the only way to fix that, is to create two sets of four columns, one for the text, and one for the images

<div class=”mycol1″>text</div>
<div class=”mycol2″>text</div>
<div class=”mycol3″>text</div>
<div class=”mycol4″>text</div>
<div class=”clear-cols”></div>

<div class=”mycol1″>images</div>
<div class=”mycol2″>images</div>
<div class=”mycol3″>images</div>
<div class=”mycol4″>images</div>
<div class=”clear-cols”></div>

2- I don’t understand what you mean by “Is it possible to show only one thumbnail instead of twenty” but if it is about using the plugin, you should ask them.

Now what I see is that the plugin is styling the column of images with a fixed width on two of its elements

#vlightbox46 {width379px;}
#vlightbox46 .vlightbox46 {width:240px;}

That should be
#vlightbox46 {width:100%;}
#vlightbox46 .vlightbox46 {width:100%;}

So you need to check in your plugin if you can set both of these things in % so it can be responsive.

if you don’t find an option ask the developer as unless the plugin is really bad for responsiveness, it should allow it. And if it does not they should be told to change that 🙂

Worst case scenario and as an ultimate resort, you could override their rules with Xtreme Custom CSS by adding the rules below in Main Options > Fonts & Custm > Custom CSS Rule box

[id*=vlightbox] {width:100% !important;}
[id*=vlightbox] [class*=vlightbox] {width:100% !important;}

[micha1451]

@weaver, @scrambler,

thank you both!
For me, its now a lot to check and – to understand!

But its obvious, that my problems are a problem of the Visual Lightbox, and not from Weaver xtreme

I have to do some work tomorrow, may be also to contact the VLBox people.

thanks and regards
Michael

[micha1451]

Hi,

the two sets of two columns (text and image) are working now on all browsers.
I don’t understand why, but this doesn’t matter 🙂

Thumbnail-topic is only a Visual-Lightbox topic, none of weaver xtreme
Thumbnails

thank you both for the – as always – quick help!
Michael

[scrambler]

Until you get answers from the plugin developer about using % for the width of the image container, you could override their rules with Xtreme Custom CSS by adding the rules below in Main Options > Fonts & Custm > Custom CSS Rule box

[id*=vlightbox] {width:100% !important;}
[id*=vlightbox] [class*=vlightbox] {width:100% !important;}

[micha1451]

Thank you scrambler, I will try this.

Today, I’ve got an answer from Visual Lightbox support. I have to check their recommendations tomorrow.

My topic today have been tables…not very pleasurable

 

Unfortunately, the code does not work. But I think that is mainly the task of Visual Lightbox people. What they sent to me as a solution, for me its to laborious.

[id*=vlightbox] {width:100% !important;}
[id*=vlightbox] [class*=vlightbox] {width:100% !important;}

[Author]

Posts