Mobile Display vs Woocommerce site

I want to be able to zoom in the site.. It should look the same in the mobile as in the browser on a computer =)

You have Jetpack installed?

It should look the same in the mobile as in the browser on a computer

Are you sure you want to be using Twenty Twelve? That theme is made mobile-first, it’s a responsive theme. Have you considered using another theme like Twenty Ten that isn’t responsive?

Hi.
Thanks for the answer.
I have jetPack but it wasn’t activated.

I activated Jetpack and activated “Mobile Theme” within it.

Now the page looks like this:

When I choose View Mobile Site

When i choose View Full Site

Yes, i want it to be responsive. In that case it resizes itself accordingly, but in my case it’s something which makes it look wired and I don’t know why ??

i don’t want to change the theme since the webpage is finished.

It looks like woocommerce is floating the product boxes left and then not removing the float for smaller screens. A quick fix might be to remove the float and beef up the width for smaller screens so products only run vertically.

@media screen and (max-width: 480px ){
ul.products li{float:none !important;min-width:250px;}
}

You can fine tune to suit.

Okey, thanks for the quick answer.
Where should I put this? ??

In the theme’s styleheet.

I copied it inti style.css but nothing happend.

i have code like this there:

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
.site-content {
float: left;
width: 65.104166667%;
}
and so on…

Should I maby put it into that tag?

Those rules get applied when the screen size is ABOVE 600px. You need to use max-width(480px) to address screens AT OR BELOW 480px. Of course, you can change the break points to suit. I don’t see the code in your stylesheet so can’t really say why it isn’t working now.
When I add the code through web dev tools in Firefox, it works like a charm, as you can see:

Screenshot

Yes okey, that’s correct. It works, but the products doesn’t get resized so they are shown beside each other like the webpage on a computers browser:

Screenshot: https://s27.postimg.org/t0nw79jnn/image_aqua.jpg

Here is a print screen from another site I created and this is how I want the products to show:

Working site

The current version of Woocommerce still has some responsive issues which your theme may not be addressing. There’s a fix you could try here:
https://alexis.nomine.fr/en/blog/2013/04/27/a-bit-of-responsiveness-for-woocommerce-2-0-default-stylesheet/

The link doesn’t work :/

Internal Server Error

I think I found the code from another of his links:

add_action( ‘wp_enqueue_scripts’, ‘change_woo_styles’, 99 );
function change_woo_styles() {
wp_dequeue_style( ‘woocommerce_frontend_styles’ );
wp_enqueue_style( ‘woocommerce_responsive_frontend_styles’, get_stylesheet_directory_uri().”/woocommerce.css” );
}

Should I just add this at the bottom of functions.php?