Search Results for 'ipad'

[Darren]

Darren

#53662

The functionality of a site I have been working on has been working perfectly on all devices since I have started the build a couple months ago. I updated to latest virtue premium today and now on iOS (iPad & iPhone) the drop downs to select variations on products do not work as they should. You have to tap the word before the drop down box rather than the actual box itself, for example you have to tap the word Sizes to make the drop downs work. Before today’s update I would tap the actual drop down box and it would work as normal.

I am unable to find an android device to test today, but on computer everything works as it should. Is there a fix to this issue?

This makes the current site un-user friendly.

Look forward to hearing from you.

Kind regards,

Darren

[Darren]

Darren

#53662

The functionality of a site I have been working on has been working perfectly on all devices since I have started the build a couple months ago. I updated to latest virtue premium today and now on iOS (iPad & iPhone) the drop downs to select variations on products do not work as they should. You have to tap the word before the drop down box rather than the actual box itself, for example you have to tap the word Sizes to make the drop downs work. Before today’s update I would tap the actual drop down box and it would work as normal.

I am unable to find an android device to test today, but on computer everything works as it should. Is there a fix to this issue?

This makes the current site un-user friendly.

Look forward to hearing from you.

Kind regards,

Darren

[Valerie]

Valerie

#53075

Hi guys

About a week ago Ben gave me the code for making the drop-down on the mobile menu stretch entirely across the screen.

It was:

.kad-nav-inner.mobileclass {
margin-left: -20px;
margin-right: -20px;
}

I want this to work on all devices that use the ‘hamburger’ menu — currently it doesn’t work on my iPad. Can I do this?

Thanks!

Valerie

[Valerie]

Valerie

#53075

Hi guys

About a week ago Ben gave me the code for making the drop-down on the mobile menu stretch entirely across the screen.

It was:

.kad-nav-inner.mobileclass {
margin-left: -20px;
margin-right: -20px;
}

I want this to work on all devices that use the ‘hamburger’ menu — currently it doesn’t work on my iPad. Can I do this?

Thanks!

Valerie

[Rolf Espen]

Rolf Espen

#51969

Hi,

Thank you for a wonderful theme.

So I have a few questions about responsivity for mobile and ipad/tablet screens. I have created an online shop using WooCommerce with the Virtue Theme. Everything looks fine when working on my computer screen, but as soon as I log in on my mobilephone there are a lot of issues. I’m a new beginner at this, so I really need some help sorting this out.

1.
I am using the primary navigation and mobile navigation for the Main Menu. When I visiting the page on my mobilephone I see a large Menu button – when pushing it I get the whole menu listed downwards with bulletpoints. My costumer has a lot of categories and subcategories. How can I “hide” the subcategories, and only show the categories by first click? For example – She has “Brands” as a category, and a lot of brandnames as subcategories. I want the costumers to be able to click the menu, see Brands – and then click Brands to see the list – if they want.

Picture 1

2.
Like I said I’m using WooCommerce and have been experiencing a few problems when viewing on a smaller screen. It is set up to show a revolution slider (with a simple text – shortcode put in product category) right under the menu and 4 product in each row. On the mobile screen the revolution slider is eihter hidden, placed on the far left halfway off the screen or in some cases it works fine.
Also, the products are placed to the far right, almost out of the screen, 1 in each row, and sometimes on top of each other. Sometimes you can see the feature image, and sometimes not.
In other words – nothing works like it should here. When you enter a product everything seems to work fine, but the problem lies in the view of several products in a category.

I want the products to be displayd at least 2 in a row when on a smaller screen, and aligned centered and not pushed to one side.

Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7 – computer screen

3.
On my shop page – I’m not using the shop page built in for WooCommerce displaying categories, but a page called Shop – I have listed the categories up by using the Virtue: Image Menu Item. This looks neet and tidy on my computerscreen, but again it looks off on the smaller screens.
It is once again shoved off to the far right of the screen, and only displays one image in a row. Here I would like to at least have it centered aligned.

Picture 8 – computer screen
Picture 9
Picture 10
Picture 11

My Costum CSS box in Theme Options looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

#content .main {float:right;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

I really hope you will be able to help me with this. Like I said I’m a new beginner and haven’t got too much experiece with WordPress, coding and all the rest of it. Hope to hear from someone soon.

Thank you!

Ida

[Rolf Espen]

Rolf Espen

#51969

Hi,

Thank you for a wonderful theme.

So I have a few questions about responsivity for mobile and ipad/tablet screens. I have created an online shop using WooCommerce with the Virtue Theme. Everything looks fine when working on my computer screen, but as soon as I log in on my mobilephone there are a lot of issues. I’m a new beginner at this, so I really need some help sorting this out.

1.
I am using the primary navigation and mobile navigation for the Main Menu. When I visiting the page on my mobilephone I see a large Menu button – when pushing it I get the whole menu listed downwards with bulletpoints. My costumer has a lot of categories and subcategories. How can I “hide” the subcategories, and only show the categories by first click? For example – She has “Brands” as a category, and a lot of brandnames as subcategories. I want the costumers to be able to click the menu, see Brands – and then click Brands to see the list – if they want.

Picture 1

2.
Like I said I’m using WooCommerce and have been experiencing a few problems when viewing on a smaller screen. It is set up to show a revolution slider (with a simple text – shortcode put in product category) right under the menu and 4 product in each row. On the mobile screen the revolution slider is eihter hidden, placed on the far left halfway off the screen or in some cases it works fine.
Also, the products are placed to the far right, almost out of the screen, 1 in each row, and sometimes on top of each other. Sometimes you can see the feature image, and sometimes not.
In other words – nothing works like it should here. When you enter a product everything seems to work fine, but the problem lies in the view of several products in a category.

I want the products to be displayd at least 2 in a row when on a smaller screen, and aligned centered and not pushed to one side.

Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7 – computer screen

3.
On my shop page – I’m not using the shop page built in for WooCommerce displaying categories, but a page called Shop – I have listed the categories up by using the Virtue: Image Menu Item. This looks neet and tidy on my computerscreen, but again it looks off on the smaller screens.
It is once again shoved off to the far right of the screen, and only displays one image in a row. Here I would like to at least have it centered aligned.

Picture 8 – computer screen
Picture 9
Picture 10
Picture 11

My Costum CSS box in Theme Options looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:160px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

#content .main {float:right;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

I really hope you will be able to help me with this. Like I said I’m a new beginner and haven’t got too much experiece with WordPress, coding and all the rest of it. Hope to hear from someone soon.

Thank you!

Ida

[ALBERTO]

ALBERTO

#51475

Thanks Ben for the fast reply,

I want to keep the animation of the text, I think is more interesting this way. Then I would like to change the slider when the web page is displayed on an ipad, similar to the option you have for mobile devices. Do you think I could do that by editing the css and adding a media query and the shortcode for the slider?

Thanks in advance,
Alberto

http://www.doliver.es/TEST1/

[ALBERTO]

ALBERTO

#51469

Hi there,

I’m trying to get the text and logos to stay in the same spot on the “revolution slider” for every device but It seems not to be able to do so.
I think it is because the text and images don’t scale down with the image but I don’t find where I can change this parameter. Any suggestions?

See the images below for better understanding:

Desktop
*Login to see link

Ipad
*Login to see link

[ALBERTO]

ALBERTO

#51469

Hi there,

I’m trying to get the text and logos to stay in the same spot on the “revolution slider” for every device but It seems not to be able to do so.
I think it is because the text and images don’t scale down with the image but I don’t find where I can change this parameter. Any suggestions?

See the images below for better understanding:

Desktop
*Login to see link

Ipad
*Login to see link

[Omar Lawson]

Omar Lawson

#51030

Hello Ben and Hannah.I have a slight issue with Woocommerce checkout page. The website in question is tropicisleliving.com. I use Paypal Pro to accept credit cards but the alignment of the credit card info areas have always been jumbled. Not sure what is causing that. I have already tried disabling other plugins.Any suggestions?

Another minor cosmetic issue with the same website above is that visiting the page on an iPad you will notice its not scaled to screen size properly. The page will scroll to the left and right and can be zoomed in or out. Any suggestions on that?

Thanks in advance.

[Omar Lawson]

Omar Lawson

#51030

Hello Ben and Hannah.I have a slight issue with Woocommerce checkout page. The website in question is tropicisleliving.com. I use Paypal Pro to accept credit cards but the alignment of the credit card info areas have always been jumbled. Not sure what is causing that. I have already tried disabling other plugins.Any suggestions?

Another minor cosmetic issue with the same website above is that visiting the page on an iPad you will notice its not scaled to screen size properly. The page will scroll to the left and right and can be zoomed in or out. Any suggestions on that?

Thanks in advance.

[Ben Ritner]

Ben Ritner

#50476

hmm, I would guess this has to do with your image size and how chrome is enlarging it for higher resolution. (because it’s not happening on ipad or iphone at x2 the px size. I would guess it has to do with the 1.5x of your sony devices).

I suggest you use an image that does not have an odd pixel width.. right now your image is 111×32 so making it 110 or 112 would be better since the browser has to stretch it for higher resolution screens and it’s falling on a half pixel. Or what would be best is that you just add support for higher resolution.

Ben

[Ben Ritner]

Ben Ritner

#50392

What device? I can look with an iphone or ipad and it looks fine on chrome. Is this again on your sony? What cell phone?

The one main thing I notice is your not using retina graphics but I don’t see a line.

Ben

[Valerie]

Valerie

#50109

Hello people

I have some cobbled together some CSS for a few things (mostly from existing posts on the forum and probably quite nasty!). The styling for the footer is only working on the desktop view — on an iPad and iPhone it reverts to the default.

How do I get tablet and smartphone font styling to be the same as the desktop? I am pretty sure it’s the ‘@media’ thing but I don’t know how to write it mostly becuase I don’t really understand it — more than happy to read stuff and sort it out if you could point me in the right direction.

Thank you!

[Valerie]

Valerie

#50109

Hello people

I have some cobbled together some CSS for a few things (mostly from existing posts on the forum and probably quite nasty!). The styling for the footer is only working on the desktop view — on an iPad and iPhone it reverts to the default.

How do I get tablet and smartphone font styling to be the same as the desktop? I am pretty sure it’s the ‘@media’ thing but I don’t know how to write it mostly becuase I don’t really understand it — more than happy to read stuff and sort it out if you could point me in the right direction.

Thank you!

[Ben Ritner]

Ben Ritner

#49999

If your using the css hannah posted how do you have the mobile menu on ipad? Your talking about ipad in landscape right?
Ben

[Omar Lawson]

Omar Lawson

#49991

This reply has been marked as private.

[Omar Lawson]

Omar Lawson

#49978

Thank you Ben for the quick response. The CSS above works but I guess the only issue is that it elongates the poll box and make that row look really bad on an iPad.I may have to find another responsive polling plugin or keep it in the sidebar as I did on the inner pages of the website.

[Omar Lawson]

Omar Lawson

#49953

Hello Ben and Hannah. I’m having some issues using the Yop polls and Sportpress plugins with Virtue. If you can, please take a look at wbajamaica.com. If you notice viewing the site on a regular sized monitor on the home page the YOP Polls seems ok, but viewing it on an ipad the adjoining box featuring the WBA TV overlaps it. Also the sidebar on the frontpage seems to overlap the body of the page. Let me know if there is any custom css to force the body and its elements to be properly aligned on a tablet sized screen. Smart phone alignment is ok.

Thanks in advance.

[Omar Lawson]

Omar Lawson

#49953

Hello Ben and Hannah. I’m having some issues using the Yop polls and Sportpress plugins with Virtue. If you can, please take a look at wbajamaica.com. If you notice viewing the site on a regular sized monitor on the home page the YOP Polls seems ok, but viewing it on an ipad the adjoining box featuring the WBA TV overlaps it. Also the sidebar on the frontpage seems to overlap the body of the page. Let me know if there is any custom css to force the body and its elements to be properly aligned on a tablet sized screen. Smart phone alignment is ok.

Thanks in advance.

[Alan]

Alan

#49945

Here is what my Facebook friend suggested it could be:

Website repeatedly reloads, then crashes on iPhone 4: iOS 8.0.2 & iOS 8.1.2

up vote
2
down vote
favorite
1
An example of what happens when loading the website can be seen here for theverge.com. No such problems occur on the latest browser and OS versions for:

Windows 8.1 – Chrome, Firefox, Opera, IE.
OSX Yosemite – Chrome, Safari.
Android 4.4 – Chrome, Firefox, Opera, Safari.
iOS 7.1.2(iPad) – Safari.
iOS 8.3 (iPhone 5) – Safari.
However, on two separate iPhone 4S devices (iOS 8.0.2 & iOS 8.1.2), Safari will continue to refresh the page, each time reading “problem occurred with this webpage so it was reloaded” until finally crashing and reading “A problem repeatedly occurred on [website URL]”. I have made sure that my JavaScript/jQuery are syntactically correct (as well as loading the webpage with JavaScript turned off in safari settings – same problem), cleared cache, restarted the iPhones and can not imagine what else could be causing the problem. The web page is only small with a total file size of around 300kb and only some fairly simple DOM manipulation.

From what I can tell of my own testing and what I have read, the problem is isolated to iOS 8.0.2 and 8.1.2 but obviously, my website is in the minority of sites that crash on the OS and I would like to know what it is exactly that causes the problem.

Thank you.

EDIT: Updated one of the iPhones to iOS 8.3 – problem still persists. Absolutely stumped at this point and any suggestions would be greatly appreciated.

Check all of your CSS for animation keyframes and remove any font-size animations within those blocks.

Long Answer

The lack of any developer-centric conversations regarding “A problem repeatedly occurred on…” issues is definitely disappointing. After an hour of Googling tonight I stumbled on your post here and had to do a double-take when I saw the timestamp. // High five fellow trouble-shooter.

As luck would have it, I was able to track down a potential source for this iOS/Webkit bug within my CSS. Specifically it seems to be related to how Safari deals with font-size animations inside of CSS keyframes. I had something like this in my SASS:

@-webkit-keyframes labels-bottom {
0% { opacity: 1; color:#888888; top: 0.1em; font-size: 1.5em; }
20% { font-size: 1.5em; opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; font-size: 0.85em; }
100% { top: 4em; opacity: 1; }
}
When I removed that whole block, it began working.

When I went further and removed CSS properties one-by-one, the crash seemed to be isolated to the font-size animation. It, however, does not appear to be associated with @font-face web fonts or if you specify size using different units (em/px/pt). All conditions tested caused the same crash. The only thing that fixed it was removing any font-size changes within my keyframe blocks, a la:

@-webkit-keyframes labels-bottom {
0% { opacity: 1; color:#888888; top: 0.1em; }
20% { opacity: 0; }
30% { top: 0.1em; }
50% { opacity: 0; }
100% { top: 4em; opacity: 1; }
}
It’s possible (and perhaps likely) that other animated properties can trigger the crash, but this fix definitely worked for me and I hope it does for you as well.

PS: I tested this on both iOS 8.1.2 and 8.3 (iPads).

shareimprove this answer
edited Apr 10 at 3:55

answered Apr 10 at 3:42

Evan Tishuk
212

It appears that the mobile Safari crashes when the keyframes contain a font-size with the unit em. Stating it in px works fine. – cad Jun 6 at 19:44
add a comment
up vote
0
down vote
Inspired by @Evan Tishuk’s answer, I scoured through my CSS but found that unlike him, I had no font-size keyframe animations. By process of elimination, I started deleting blocks of code, starting with those with vendor-prefixes and found that this was the code causing the problem:

.qanda{
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=’0′);
}
Very silly of me. The blur filter wasn’t even needed on my site, just some code I was playing around with and forgot to remove.

shareimprove this answer
answered Apr 11 at 2:40

Jack Ducasse
112
add a comment
up vote
0
down vote
Per Evan and Jack’s answers, this is most probably CSS-related. Which styles exactly? That can vary.

I had the same issue: Safari on iPhone4 and iPhone6 was reloading the page until it crashed. Site was fine on iPad2, iPad Air, iPhone5, and every simulated device in IOS simulator (including simulated iPhone4 and iPhone6).

The CSS (OK, LESS) that was breaking the site:

ul {
.transform(translateZ(0));
a {
.transform(translateZ(0)); /* Right here, the nested transform */
}
}
Once I removed that nested transfrom Safari stopped frekin’ out and all was good in the world.

[Hannah]

Hannah

#49847

Hi,
This is actually how the theme is set up. If you want to display the normal menu on an ipad you can use css like this:

@media (min-width: 992px) {
	#nav-main ul.sf-menu, .nav-main ul.sf-menu {
    	display: block;
    }
#kad-mobile-nav {
	display: none;
	height: auto;
	}
	#mobile-nav-trigger {
	display: none;
	height: auto;
	}
}

Just paste that in your custom css box in theme options > advanced settings.
Hope it helps!

Hannah

[Dan]

Dan

#49845

My site can not show detail menu on ipad, it only show menu icon same like on iphone
my site, http://www.igetnewbody.com

[Dan]

Dan

#49845

My site can not show detail menu on ipad, it only show menu icon same like on iphone
my site, http://www.igetnewbody.com

[Patricia]

Patricia

#48869

Sorry to be a pest…we are almost there I think…

After adding the code, it shows correctly if you hold the iPad vertically, but when held horizontally, the menu button is now behind the slider I think….It isn’t visible.

[Patricia]

Patricia

#48860

Yes. I have cleared the cache and viewed it on a different, newer iPad, but it still is overlaying the image. Not by a lot, but about 10 or 15 pixels.

[Patricia]

Patricia

#48855

Ben, I added that CSS, but it still is displaying the same way on the iPad. I could email you a screen cap, but the 3 lined Menu button is showing through the bottom part of the header image. Or I guess it is overlaying it??

I have tried changing the setting to NOT show the menu button only, but rather display the meny, but it won’t do that.

Thanks again…

[Patricia]

Patricia

#48832

Hi,

As usual, thank you in advance for your always excellent help.

Would you look at my site: *Login to see link ? Everything is fine on a desktop or an iPhone, but on an iPad, the menu button is showing up under the image that I have in the header area. I am not picky about whether the actual menu shows (which is only 3 buttons) or just the Menu button on mobile, but I do have it set to the Menu button right now. I think it has something to do with the padding or spacing, but I am terrible with trying to figure out the CSS fix for these things.

Also, below is the only custom CSS I am using. I thought that might help you see what I did wrong.
Thanks so much!

Patty

.page-header {
display: none;
}
.sliderclass {
padding: 0px;
}
.sliderclass {
border-top: 5px solid #553107;
border-bottom: 5px solid #553107;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
.contentclass {
padding-top: 0px;
}

[Patricia]

Patricia

#48832

Hi,

As usual, thank you in advance for your always excellent help.

Would you look at my site: *Login to see link ? Everything is fine on a desktop or an iPhone, but on an iPad, the menu button is showing up under the image that I have in the header area. I am not picky about whether the actual menu shows (which is only 3 buttons) or just the Menu button on mobile, but I do have it set to the Menu button right now. I think it has something to do with the padding or spacing, but I am terrible with trying to figure out the CSS fix for these things.

Also, below is the only custom CSS I am using. I thought that might help you see what I did wrong.
Thanks so much!

Patty

.page-header {
display: none;
}
.sliderclass {
padding: 0px;
}
.sliderclass {
border-top: 5px solid #553107;
border-bottom: 5px solid #553107;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
.contentclass {
padding-top: 0px;
}