Margin on Mobile

[[email protected]]

Hi there,

I ve 2 websites (same everything but different language) and I have problems with the layout of the payment page.

As you can see from the attachments the italian website (the one I’m currently interested in) dispaly the payment fields incorrectly (they are cut out of the screen), while the english one is perfect.

I think it depends on the fact that one website (italian) displays boxed content (as you can see in the attachment) while the english website is full screen

The weird thing is that apparently the settings are exactly the same…I didn’t find any difference in the back end

Please help me

Reagrds

Fabio

FYI

italian site (faulty): timeforyourskin.it
english site (ok): timeforyourskin.com

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[[email protected]]

Dear Rui

Thanks for the reply

I ve done a further test and I ‘ ve noticed there are 2 different problems we need to face

1) the italian website has margins, while the .com doesn’t. Apparently settings are the same, but maybe i’m missing something

What is the specific setting to get rid of the margin?

2) the iframe html that appears in the Italian checkout page is not responsive, true.

But only on your theme. As you can see in the other screenshot I ve sent you from website trial.timeforyourskin.com (which loads default theme twentyfourteen) the iframe loads perfectly

Please have a look at it as the iframe is declared responsive from the developer (and as we can both see with other themes it is)

Kind regards

Fabio

[Rui Guerreiro – SUPPORT]

Hi,

Looking at your 2 sites in the cart page they have the same sizes and margins.

Regarding the Iframe I checked that url directly in the browser(is not valid anymore) and when it reaches the mobile resolutions the way it looks it in mobile it’s not the best.

try to test it with the default Twenty 15.

-Rui

[[email protected]]

Dear Rui,

It’s undeniable that the laptop version of the 2 websites look the same (in relation to margins)

At the same time if you access these 2 websites from mobile the timeforyourskin.it has side margins that I want to get rid of, while timeforyourskin.com has not

Please help me to understand how to get rid of them

Regarding the second issue, the website trial.timeforyourskin.com (same in everything to the previous, but loading a default theme -twentyfourteen- rather than neighborhood), displays the i frame properly as in the attachment

So the issue is related somehow to the neighborhood theme, I guess

Regards

Fabio

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

I debug it but couldn’t get to a conclusion yet, even the english version in mobile looks like this. It’s not responsive.

https://www.dropbox.com/s/gjm7vl5wqmgbun1/timeforskin.png?dl=0

What device are you using so I can emulate?

-Rui

[[email protected]]

Dear Rui,

Thanks for going trough it.

We are using both iphone 4 and samsung s4 mini

Anyway I try to clarify the 2 different issues better

there are 3 sites we are comparing

– timeforyourskin.it – italian site with neighborhood theme
– timeforyourskin.com – english site with neighborhood theme
– trial.timeforyourskin.com – copy of the english site(used for testing), but with twentyfourteen theme

issue a) the italian site has margins when you see it from mobile, while the other two don’t–> I want to remove the margins from the italian site

issue b) both timeforyourskin.it and timeforyourskin.com (both loading your theme) display incorrectly the iframe on mobile (it doesn’t look responsive, you are right), while the theme twentyfourteen loaded on trial.timeforyourskin.com display the iframe properly (responsive)–>I’d like to have the iframe displayed correctly also on the production sites

Hope now it is more clear

Regards

Fabio

[Rui Guerreiro – SUPPORT]

After repeating the test in mobile in the Site with Twenty 15, it looked the same way has the other versions with Neighborhood theme.

https://www.dropbox.com/s/ezrq89yixu4suu0/2015-06-12%2021.21.29.png?dl=0

Regarding the margins in the Italian versions. Add the code below to your custom css option

@media (max-width: 767px){
body {
   padding-right: 0px!important; 
   padding-left: 0px!important; 
}
}

-Rui

[[email protected]]

Dear Rui

Great the margin problem is solved

Thanks a lot

Regarding the other I don’t know what to say regarding your screenshots…I just tried again with 2 different mobiles (iphone 4 and samsung s4 mini) and these are the results…

it is clearly showing something different

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Strange. could it be the same reason why you weren’t see it in the Italian.
can do one more test and purging the cache before?

If not will forward to a support colleague to get a different opinion.

-Rui

[[email protected]]

Dear Rui,

The trial.timeforyourskin.com has no cache active

Please let me know if your colleague finds out anything

I truly appreciate

Fabio

[Rui Guerreiro – SUPPORT]

I meant in the Phone device.
Just give it a try and I will forward it after that experience.

-Rui

[[email protected]]

Dear Rui,

Same thing for me after flushing the cache of my mobile

I ve also tried with my brother’s brand new mobile (iphone 6) and it displays perfectly

Please keep me updated

Fabio

PS. I think that even if it were a problem of cache, there is still some evidence that the iframe could be responsive

[Rui Guerreiro – SUPPORT]

thanks for the test. Will forward it to our developer.
-Rui

[Swift Ideas – Ed]

Think this css should sort it:

#paypal-pro-hosted-iframe {
max-width: 100%;
}

By the way I see the form the same as Rui sees it – not the styling that you have shown in your screenshots..?

– Ed