Winchester Black Responsive Template

[picaflor-azul]

Agreed, when displaying on a desktop using the link you provided and re-sizing the window the menu icon appears over the top of the specials bar in the top right of the screen. When viewing on an iPad Retina however the menu icon appears in the middle of the page and only half visible as the top is hanging off the page as below:

Attachment 15005

Thanks

Lee

If you want to view the tablet view on a desktop and just resize the browser window then you need to use this url:

site url.com/index.php?main_page=index&display_mode=isTablet

so for my demo:

http://weblyweb.com/win/index.php?ma..._mode=isTablet

This will switch the user agent so you see the correct layout.

Thanks,

Anne

[OLCS]

In the stylesheet.css file add this to the #navMainSearch:

position:relative;
z-index:1;

Thanks,

Anne

Great, thanks Anne, that's fixed it!

[OLCS]

If you want to view the tablet view on a desktop and just resize the browser window then you need to use this url:

site url.com/index.php?main_page=index&display_mode=isTablet

so for my demo:

http://weblyweb.com/win/index.php?ma..._mode=isTablet

This will switch the user agent so you see the correct layout.

Thanks,

Anne

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?ma..._mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

[picaflor-azul]

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?ma..._mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

I am sorry, but I can not see the problem:

http://durl.me/89ycwz

If you want to move the menu icon for portrait tablets you can do it in the responsive_tablet.css file.

Thanks,

Anne

[picaflor-azul]

I am sorry, but I can not see the problem:

http://durl.me/89ycwz

If you want to move the menu icon for portrait tablets you can do it in the responsive_tablet.css file.

Thanks,

Anne

Scratch that. I do see it now.

Thanks,

Anne

[picaflor-azul]

Hi Anne,

That's what I am saying, I looked at your site on my desktop using the url http://weblyweb.com/win/index.php?ma..._mode=isTablet and agree that it displays correctly when you re-size the browser window.

However if I use my iPad and browse to http://weblyweb.com/win/index.php?main_page=index and view that in portrait mode on my iPad retina the menu icon appears as shown in the image on my post above, so I think there is something wrong in the stylesheet somewhere..

If I view on an iPhone 5 again it displays correctly, so there only appears to be something wrong with portrait orientation on an iPad Retina

Thanks

Lee

Ok, add this to the bottom of the styles for the portrait tablets in includes/templates/override/css/resonsive_tablet.css:

.safari #menu{top:30px;}

Then change this line:

#menu{width:100%;position:absolute;top:0;left:0;z-index:9999;}

to this:

#menu{width:100% !important;position:absolute;top:0;right:0;z-index:9999;}

Thanks,

Anne

[picaflor-azul]

Another small fix for safari mobile. Add this to both the landscape and portrait sections of the responsive_tablet.css file:

.safari input [type=submit], input[type=submit]{ -webkit-appearance: none;-webkit-border-radius: 0;}

Thanks,

Anne

[picaflor-azul]

Ok, add this to the bottom of the styles for the portrait tablets in includes/templates/override/css/resonsive_tablet.css:

.safari #menu{top:30px;}

Then change this line:

#menu{width:100%;position:absolute;top:0;left:0;z-index:9999;}

to this:

#menu{width:100% !important;position:absolute;top:0;right:0;z-index:9999;}

Thanks,

Anne

Scratch this. I just noticed a mistake in the file. To fix the problem you just need to remove this line in the /* ----------- iPads (portrait) ----------- */ section:

#menu{float:none;margin-top:-30px;width:50%;}

Thanks,

Anne

[himmon]

Hello Anne,

Can confirm the categories menu is now working fine on my ipad3 in portrait. Have the 3 horizontal menu dashes on top of eachother in the top right hand corner of the main page which drops down the categories, information and contact menus.

Btw, thank you for sharing this great template, really clean and simple. Extremely impressed!


Nathan

[picaflor-azul]

Hello Anne,

Can confirm the categories menu is now working fine on my ipad3 in portrait. Have the 3 horizontal menu dashes on top of eachother in the top right hand corner of the main page which drops down the categories, information and contact menus.

Btw, thank you for sharing this great template, really clean and simple. Extremely impressed!


Nathan

Thanks for posing ;) I am happy that you like the template package.

Thanks,

Anne