Winchester Black Responsive Template

Quote:

---

Originally Posted by OLCS

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

Quote:

---

Originally Posted by picaflor-azul

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

Code:

---

position:relative;
z-index:1;

---

Thanks,

Anne

---

Great, thanks Anne, that's fixed it!

Quote:

---

Originally Posted by picaflor-azul

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

Quote:

---

Originally Posted by OLCS

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

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by OLCS

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:

Code:

---

.safari #menu{top:30px;}

---

Then change this line:

Code:

---

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

---

to this:

Code:

---

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

---

Thanks,

Anne

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

Code:

---

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

---

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

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

Code:

---

.safari #menu{top:30px;}

---

Then change this line:

Code:

---

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

---

to this:

Code:

---

#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:

Code:

---

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

---

Thanks,

Anne

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

Quote:

---

Originally Posted by 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

---

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

Thanks,

Anne