Template Responsive issues

propolis

Hi,

I tested my site - www.chesapeakes.uk - against various devices for responsiveness and found 6 issues:

On iPad in landscape mode - Menu is gone and image in slide show is not centered
On iPad in Portrait mode - Menu is gone ; BUT THE IMAGE IS CENTERED
On iPad Mini - in landscape mode - Menu is gone and image in slide show is not centered
On iPad mini - in Portrait mode - Menu is gone ; BUT THE IMAGE IS CENTERED
On Surface Pro portrait - Menu is gone ; BUT THE IMAGE IS CENTERED
On 10" and 13" Notebooks - Menu is gone and image in slide show is not centered

Any suggestions much appreciated.

Eddie

teitbite

propolis Hi. Can You please explain how would You like to have it? Centered image all the time and menu always visible?

propolis

teitbite

Hi,

When I launch on iPad, iPad mini and some tablets, the menu does dot show. If you drag the main image to the right and down, you will see the menu behind the image. See images below:

iPad Portrait:

Menu not showing but image is fine.
Now look where the menu is:

Now look at iPad landscape - menu not showing and image off the centre:

Now look where the menu is in image below:

This happens on iPad minis as well as some tablets

PC's and mobile devices seems to be fine.

As I was testing, I reduced the number of menu items by 3, then it seems to work, not sure if thats is misleading info or not?

Hope this makes sense :-)

Eddie

teitbite

propolis Hi. I can see now. Menu has a little too many options for this template. Try add this code to reduce spaces between menu elements:

@media only screen and (max-width:1050px) {
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > span {
    padding-left: 5px;
		padding-right: 5px;
}
}

@media only screen and (max-width:850px) {
.nav > li[data-id="197"] {
    display: none;
}
}

propolis

Hi,

I tried this and it works, but 2 things. The menus looks to close to each other(squashed up), as all the letters are uppercase. Is there a way I can test it with just the first letter of each word in the menu being uppercase (just a test to look at appearance.

The other thing is all look good in all modes, but in iPad landscape the image is not centered. See image below.

Eddie

pavit

propolis Is there a way I can test it with just the first letter of each word in the menu being uppercase (just a test to look at appearance.

Try to add to custom.css

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span {
text-transform:capitalize!important;
}

but in iPad landscape the image is not centered.

Try to add to custom.css


@media (min-width: 768px)  {
.acm-slideshow .item {
min-height:100%!important;
}
}

propolis

Thank you very much for all the help from everyone.

This is now working 95%. The other 5% I can complete.

Thank you - This thread can now be closed

Eddie :-)