Too much space under the header-area
Permalink Browser Info Environment
Hi,
i have a little problem with the template slate.
When I watching my page with a smartphone, there is a lot white field under the slideshow(over the ?breadcrumbs?).
The slideshow is in the header-top-area.
On my personal computer its looks good.
I have seen a file that called "mobile.css" .
I tried already some with the file, but had no success.
I try it with different smartphones already .
(LG Optimus Speed with Android and Samsung GT S5620)
Can you give me a tip to resolve the problem ?
The Homepage is:
http://www.ibb-agesche.de/cms/con5...
Greetings from Germany.
i have a little problem with the template slate.
When I watching my page with a smartphone, there is a lot white field under the slideshow(over the ?breadcrumbs?).
The slideshow is in the header-top-area.
On my personal computer its looks good.
I have seen a file that called "mobile.css" .
I tried already some with the file, but had no success.
I try it with different smartphones already .
(LG Optimus Speed with Android and Samsung GT S5620)
Can you give me a tip to resolve the problem ?
The Homepage is:
http://www.ibb-agesche.de/cms/con5...
Greetings from Germany.
Type: | Discussion |
---|---|
Status: | New |
Yeah, that's kind of a limitation with how the default slideshow works. Because it sets the image as the background of the slide div and sets a height on the div, there's no way to auto set the height of the div in the mobile version. The image is able to be scaled via css, but since it's a background image there's no way to tell how high the div should be. A fix would be if all the images are the same height in all your slideshows, you could add a height in pixels to that div in the mobile.css file like this:
Thank you for the fast response.
I have put the code in to the mobile.css, but it do not work.
The space under the slider remains.
I also put the slider on other column, but the problem exist again and again with too much white space between the slideshow and the next element. But only on the smartphone. I am helpless.
Could may the slideshow be the problem ?
It would be nice so you can help me to resolve the problem.
Greetings.
I have put the code in to the mobile.css, but it do not work.
The space under the slider remains.
I also put the slider on other column, but the problem exist again and again with too much white space between the slideshow and the next element. But only on the smartphone. I am helpless.
Could may the slideshow be the problem ?
It would be nice so you can help me to resolve the problem.
Greetings.
First, clear your site's cache (go to Dashboard -> System & Settings -> Clear Cache) and your mobile browser's cache. The old mobile stylesheet is most likely cached in.
If it still doesnt work try adding !important after the height, so it should be:
If it still doesnt work try adding !important after the height, so it should be:
height:100px!important;
It dosent work.
I have cleared the cache on concrete5 and on my phone.
I use the slider from concrete5. With another slider like "Power Slider Lite" everything goes smoothly.
But with the free slider on the marketplace there are problems with the presentation on the smartphone. The size of the image are not adjusted.
The pictures appear too large.
What could be the problem?
Greetings
I have cleared the cache on concrete5 and on my phone.
I use the slider from concrete5. With another slider like "Power Slider Lite" everything goes smoothly.
But with the free slider on the marketplace there are problems with the presentation on the smartphone. The size of the image are not adjusted.
The pictures appear too large.
What could be the problem?
Greetings
I dont see this in your mobile.css file.
Did you remove it? Because it wont work without that in there
.ccm-SlideshowBlock-display .slideImgWrap div { height: 100px!important; /*modify this to your needs*/ }
Did you remove it? Because it wont work without that in there
Yes i have remove that.
Now i have upladed the changed mobile.css
Now i have upladed the changed mobile.css
It changes nothing.
I've tried a few settings but the space remains.
Do you have any idea?
Thanks for the help.
I've tried a few settings but the space remains.
Do you have any idea?
Thanks for the help.
Change it to this:
You have to add the height to the outter wrapper div as well.
.ccm-SlideshowBlock-display, .ccm-SlideshowBlock-display .slideImgWrap div { height: 100px!important; /*modify this to your needs*/ }
You have to add the height to the outter wrapper div as well.
Perfectly, it works!
But now I have a big problem with tables on the smartphone.
I have also problems with the sequence of the display of columns on the smartphone.
Is it possible to show the complete website on the smartphone and the user can scale/zoom the page ?
I've renamed the mobile.css debugging purposes and delete in the columnal.css all entries which are intended to adjustment on smartphones (from the entry / * COLUMNAL - MOBILE). However, the content of the footer will not display properly on the smartphone. And other things.
Thank you.
But now I have a big problem with tables on the smartphone.
I have also problems with the sequence of the display of columns on the smartphone.
Is it possible to show the complete website on the smartphone and the user can scale/zoom the page ?
I've renamed the mobile.css debugging purposes and delete in the columnal.css all entries which are intended to adjustment on smartphones (from the entry / * COLUMNAL - MOBILE). However, the content of the footer will not display properly on the smartphone. And other things.
Thank you.
Great!
Yeah tables can be a mess. Here's some links you might want to check out:
http://www.quirksmode.org/m/table.html...
http://css-tricks.com/responsive-data-table-roundup/...
To get the complete site on mobile, you'll need to remove this line from the theme's header.php file:
Yeah tables can be a mess. Here's some links you might want to check out:
http://www.quirksmode.org/m/table.html...
http://css-tricks.com/responsive-data-table-roundup/...
To get the complete site on mobile, you'll need to remove this line from the theme's header.php file:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
I've just started working on my site. I'm having the same issue with too much space showing under the header on my laptop in any browser. I'm not a programmer developer, so there's probably a simple reason that I'm just not aware of, but would appreciate any feedback you could give:http://hoppermarketing.com/
Resize your images to be 1100 pixels wide and it should fix that problem.
Ooops. Sorry. Thought I had. All good now. Love the theme by the way. Very easy to use.
No problem. Thanks for the great feedback!