Layout Issues with Homepage

Hi,
I have shortened the height of the big homepage-image. All necessary layout adaptions I made as good as possible with the help of Firebug.

1)
Still, I cannot get rid of the big empty space between the content and the footer on the homepage. Please see the screenshot.
--> How can I reduce that empty space?

2)
I included a HTML module on the homepage with some text. This text is intended to stay there permanently. Between this text and the homepage image, there is the text of the "news teaser", which will change from time to time.
--> How can I shift the HTML module to the right that it is aligned vertically with the other text? If I simply shift the text within the module to the right, then the mobile version looks ugly, so this is not a good solution.

You can see the page live here: http://www.scotialight.com

homepage.jpg

Thanks for help!

Hi,

about 2 please add suffix to this module. For example ' my suffix' (remember about white space before suffix name). Then please add to override.css

Code: Select all

.mysuffix {
margin-left: 160px;
}


and remember to enable override.css option in template settings.
About 1. Height of main content is relative. Becasue your side bar have more height and is in the same container as mainconent, parent container will be as much height as much content in sidebar. Try reduce it.

Hi,
I have changed my homepage as described above that all articles are aligning with each other.

Now I see that the mobile version of course needs the same changes. Could you tell me, how to get to this result?

In the web version, I could play around with Firebug. For the mobile version, I would not know how to use Firebug...

1) Move content up
2) Article alignment: take away the 160px indention for the mobile version only:

klein2105273566.fw.png

A tip for you, in order to use Firebug to work with mobile layout, just re-size your Firefox window to have the same width with your mobile screen.

A tip for you, in order to use Firebug to work with mobile layout, just re-size your Firefox window to have the same width with your mobile screen.

So simple - great, thanks for the tip


Regarding the issue:

basically, what I have defined, is a module class, where the content is indended by 160px. So far so good.
But I want to use the module class only in the web version, and not in the mobile version.

Do you see any kind of possibility, to do this on a CSS-level?

You may add more code to mobile.css to remove those spaces.