Single shop page not responsive on iPhone

[MHC]

Hi,

My single shop page is not responsive on iPhone. It’s looking weird and messed up right now. Please check screenshots I attached.

[MHC]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Have you added any custom css? It may help if I can see your link

– Kyle

[MHC]

This reply has been marked as private.

[Kyle – SUPPORT]

Your site is in maintenance mode

Please provide me with a login so I can view the site

– Kyle

[MHC]

This reply has been marked as private.

[Kyle – SUPPORT]

Looks like something is broke, please upload a fresh copy of the theme’s files through ftp

– Kyle

[MHC]

Hi Kyle,

I’ve deleted Dante 2.53 via FTP and uploaded a fresh copy of Dante 2.61 but the site still looks broke with many Undefined index notices… Please take a look.

Thanks.

[MHC]

This reply has been marked as private.

[MHC]

Hi Kyle,

I reset the theme settings to default and the undefined index notices are gone now.
However the mobile version of the single product page is still not responsive.

[Kyle – SUPPORT]

That’s because you have this in your custom css:

/* SINGLE PRODUCT */
.woocommerce div.product div.images {
width: 50%;
}
.woocommerce div.product div.summary {
width: 47%;
}
.woocommerce div.product .entry-title {
display: block;
float: right;
width: 47%;
text-align: left;
font-size: 18px;
margin-bottom: 8px;
}

You need to put that in a media query so it only applies on large screens

– Kyle

[MHC]

Hi Kyle,

Thanks I didn’t know this. Could you please point me where I can put the CSS in a media query?

[Kyle – SUPPORT]

Replace the css with:

@media only screen and (min-width: 769px) { 
/* SINGLE PRODUCT */
.woocommerce div.product div.images {
width: 50%;
}
.woocommerce div.product div.summary {
width: 47%;
}
.woocommerce div.product .entry-title {
display: block;
float: right;
width: 47%;
text-align: left;
font-size: 18px;
margin-bottom: 8px;
}
}

– Kyle