Ok so i think i figured this out.
I entered the following in the custom css:

.top-2 {
height: 300px;
}

Please let me know if this is wrong and will result in any design-trouble for the template

ahhhh, i was to quick. Dont seems to be working all good for the mobile solution.

Please advise how to decrease this height so that it will be fine in both desktop and mobile.

Hello

The current height of your modules is been determined by the height of your image in the left module position. One option would be to set a manual width for the containing module position (Extensions -> Templates -> [YourTemplateStyle] -> Manual Widths. By default as you have 2 modules your width will be 50% each. Reducing the width of the module position containing the image to say 35% will also reduce its height as it will scale down the entire size of the image.

Ciarán

Very good thank you!

I notice that when viewing this site on iphone, the image on the left side is not showing. Is there anything i have to do to make this show (or not to show this module position) in the mobile version ?

Hello

Try removing the following from the 'Module Class Suffix' field in the advanced tab of your image module settings...

hidden-phone 

Ciarán

Hi Ciaran,
i did so but it is still a bit odd. I have a big space between the slideshow and the module at top-2a/top-2b.
Will you please check again ?

Hello

Could you also try adding the following to the Custom CSS field of your templates parameters...

#container_slideshow {

    height: auto !important;

} 

Ciarán

Perfect! Thank you so much for your help and patience