Still some problems with my frontpage - save my holidays :)

Hello,
I still have some unsolvable problems with my frontpage. I really need help for having peaceful holidays
I made some screenshots due to my terrible english

Problem 1)
The module has the suffix frontpage. Whatever I change in css I can´t get rid of those gap between tabs and content. Whatever I change in .frontpage-css doesn´t have any effect of the gap there.

Problem 2)
How to get rid of those lines in content? Suffix clear doesn´t do the trick

Problem 3)
And still there is a problem with my header image. Slowly it´s driving me mad and steals my sleep.
How can I specify the proper height for the image without getting a gap between header image and content? When I set this:
#gkLogo.cssLogo {
background-image: url("../images/header_1410.png") !important;
background-size: 100%;
margin: 0;
max-width: 100%;
width: 100% !important;
height:160px;
}
i see the complete height of my header, but when I resize the window the content is going down and theres a big gap between content and header. Height:100% makes the header dissappear, same like height: auto.
The image resizes on smaller screens, but the missing height is only visible on small screens. Please please give me the proper code, I don´t want to guess anymore. I think I´ll never find a solution if you don´t help me. I think I´m trying to solve this mystery until next year if I don´t get the right code for the height of the background for my header.

And some more questions:
1. Is it possible to change the order of the boxes in mobile view? I´d like to see the tabs module a little earlier when I scroll down. I know I could make some modules invisible on moble, but how to change their order?

2. Is it possible to edit the mobile menu? In main menu I use a lot of Text separators for the "archiv content". Would it be possible to have a link only in mobile menu? In main menu a separator, in mobile menu a link to a small site with the links that are child links in main menu? In my case "Team, Topscorer and Spielberichte". My mobile menu is to confusing with so many links. Can I format some links bigger or smaller?

3. I would need a bit of help for making some content reponsive. Anyone here, who knows about divs? Only on two pages, I can use them as a pattern for the rest.

I hope I could get a little help before christmas. I can´t sleep very well when there are so many unsolved mysteries
But nevertheless I wish you nice holidays

Could you please post an url to your site?

Ps. Next time please separate your question into different forum threads - it helps others to search for solutions.

Sorry, i forgot to put my URL into text.
I´m talking about thie page: http://testserver.grizzly-adams.de/

1.

Code: Select all

.gkTabsContainer table {margin: 0px;}


should remove spacing on top and bottom (actyally it is on bottom but you have image centered vertically so it isn't that obvious).

2. To remove horizontal lines, please modify this override.css code:

Code: Select all

  div.srfrContainer ul.srfrList li {
    border-top: 0px solid #ccc;
    padding: 2px 1px;
}


and remove borders completely:
div.srfrContainer ul.srfrList li {
border: none;
padding: 2px 1px;
}

3. "Is it possible to change the order of the boxes in mobile view? I´d like to see the tabs module a little earlier when I scroll down. I know I could make some modules invisible on moble, but how to change their order? "

Sorry, but it is not possible .

4. "Is it possible to edit the mobile menu? In main menu I use a lot of Text separators for the "archiv content". Would it be possible to have a link only in mobile menu? In main menu a separator, in mobile menu a link to a small site with the links that are child links in main menu? In my case "Team, Topscorer and Spielberichte". My mobile menu is to confusing with so many links. Can I format some links bigger or smaller?"

Again, sorry, no - both "desktop" and "mobile" menus uses same menu source. You could hack it by editing template core files (and selecting different menu as a soruce for mobile menu) but I would strongly advice against that solution.

5. "I would need a bit of help for making some content reponsive. Anyone here, who knows about divs? Only on two pages, I can use them as a pattern for the rest."

Could you please post a sample page? All our templates should allow the content to be responsive.

Hey, thank you for your help. It looks much better right now. With a new created moduleposition I have at least a responsive header image. But when i switch off the header image in the template features, the small logo in the navigation dissappears too. Is it possible to keep only the gkLogoSmall?

Most of my content uses tables. On mobile devices I see too many scrollbars, due to the width of the tables. I thought it would be sometimes better if I would have used divs. Like here: http://testserver.grizzly-adams.de/inde ... ren-berlin. Or here:
http://testserver.grizzly-adams.de/inde ... -2015-2016
On my old site I used Tabs GK5 for presenting the players details (http://www.grizzly-adams.de/index.php?o ... em&id=1461). All in tables, because I never knew how to make sth like this with divs.

Or in general my tabs on my frontpage. There is a lot to adjust to have a full responsive site.

If you want me to check the logo issue, please make it show on your site.

I changed back to css logo again. Now there are 2 logos, my header image in a new moduleposition and the small logo that jumps into the navigation bar when scrolled down.
How can I hide the second logo as long it is not scrolled down, but have it then back next to navigation? Tried with "hidden" but the "navi logo" is always affected and hidden too.

I guess this is what you are searching for:

Code: Select all

#gkTopBar #gkLogo {display: none;}


Yes, now it looks great.
Now I tried to add some new modulepositions for three boxes between bottom4 and bottom5 module position. Code for them:

Code: Select all

<?php if($this->API->modules('bottombox1')) : ?>
<div>
<jdoc:include type="modules" name="bottombox1" style="<?php echo $this->module_styles['bottombox1']; ?>" />
</div>
<?php endif; ?>


   <?php if($this->API->modules('bottombox2')) : ?>
<div>
<jdoc:include type="modules" name="bottombox2" style="<?php echo $this->module_styles['bottombox2']; ?>" />
</div>
<?php endif; ?>
   
      <?php if($this->API->modules('bottombox3')) : ?>
<div>
<jdoc:include type="modules" name="bottombox3" style="<?php echo $this->module_styles['bottombox3']; ?>" />
</div>
<?php endif; ?>


Added the following css to have them three in a row:

Code: Select all

.box.bottombox1 {
    float: left;
    width: 33%;
   background-color:white;

}
.box.bottombox2 {
    float: left;
    width: 34%;
      background-color:white;

}
.box.bottombox3 {
    float: right;
    width: 33%;
      background-color:white;

}

.
Didn´t work like expected

How can I put three boxes next to each other while having a continous white background behind all three boxes? Where to put the gkPage class where I definded the white bg? How to make them only as wide as the content, like for example the weather module?

I need to see such sample page to be able to check what you did wrong.

I´m still on my frontpage, at the bottom. Of course there are a lot of pages where making three boxes next to an other (under each other on mobile devices) would be a good thing to know.

Thinkg you are doing is a customisation and you should know how to do it, we don't provide frontend support for custom changes.
But to give you a tip - you have additional div in each of those elements and it simply will not work this way because your css code assumes that all elements are in same container.