nico6293

Hello Tom
Works great, Thanks.
Can you help me to set the correct comments for each piece of code so in future I know what the function is of each piece?

Thanks,
Kind regards
Nico

/* Single product page ******************************************************/
/* */
@media (max-width: 768px) {
    .woocommerce #content div.product div.images, 
  	.woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
      width: 30%;
      margin-left: auto;
      margin-right: auto;
    }
}

/* */
@media (min-width: 769px) {
    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
      width: 15%;
    }
}

/* */
@media (min-width: 769px) {
  .woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
     width: 15%;
     margin-left: 20px;
     margin-right: 10%;
     display: inline;
     padding-left: 0 !important;
  }

/* */
  .woocommerce div.product .entry-summary h1.product_title.entry-title, .woocommerce div.product .entry-summary p.price {
     text-align: left;}

/* */

  .woocommerce div.product div.summary {
     float: unset !important;
     display: inline;
  }
}

/* */
.single-product-area {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* vertical align center amount and 'in basket' button */
@media (max-width: 768px) {
    .woocommerce div.product form.cart {
        display: inline-block;
    }
}

Good morning Tom

In the screenshots the items within the green oval are not centered in small screen. The screenshots vertical and horizontal are from my mobile.

https://doodiszodoodnogniet.nl/screenshots/

Hi Tom
On small screens the product image, title and price are correct aligned center. The number and ‘in basket’ button are alighned left.
Kind regards,
Nico

Hi Tom
I did what you suggested. It does not seem to work.
Nico

Hi Tom.

Thank you.
Now on big screens the one product pages looks fine.
Can you help me with centering the product image, title, price, number and ‘in basket’ button on small screens?

Thanks,
Kind regards,
Nico

Hi Tom
I just made a purple rectangle for you to understand that the content in that rectangle should be centered on the page. I don’t want the rectangle on my page.

Here you see how I would like it to be:
https://doodiszodoodnogniet.nl/screenshots/

Thank you.
The large screen now is ok, but I would like to have everything within the purple rectangle centered on the page. Just as you see at https://doodiszodoodnogniet.nl/screenshots/

Here is the code that is in use now.

@media (max-width: 800px) {
    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
      width: 30%;
    }
}

@media (min-width: 800px) {
    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
      width: 15%;
    }
}

@media (min-width: 769px) {
  .woocommerce .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
     width: 15%;
     margin-left: 20px;
     margin-right: 10%;
     display: inline;
     padding-left: 0 !important;
  }

  .woocommerce div.product .entry-summary h1.product_title.entry-title, .woocommerce div.product .entry-summary p.price {
     text-align: left;}

  .woocommerce div.product div.summary {
     float: unset !important;
     display: inline;
  }
}

The image at https://doodiszodoodnogniet.nl/screenshots/ shows how I would like it to become.

Hi

On small screens (<769 PX) it would be nice if prodcut image, title, price, amount and ‘in basket button’ are vertically aligned: Center.

On large creens (>768 PX) it would be nice if product image is left (as it is now) of title, price, amount and ‘in basket button’. And title, price, amount and ‘in basket button’ are vertically aligned left
(Please look at https://doodiszodoodnogniet.nl/screenshots/)

x

Hi Rashed

Your snippit works fine.

Thanks

I found the answer myself
thanks

.pum-open-overlay.pum-open-scrollable {
margin-right: 17px;
position: relative;
}

html.pum-open.pum-open-overlay.pum-open-scrollable body>[aria-hidden] {
padding-right: inherit;
}

did the trick

No
You made a change that does not work for me. You ask me to do this and that and hunderds of other things. This does not work for me. When I have a problem with my car, my garage will do the work and not tell me what to do.

YOu should do the work. Not me. If you can not log in to my site and help me there, you can’t help me at all.

So there is only one option: change to other css plugin.
This immediately solved my problem. the other css plugin works fine.

Kind regards,
Nico Cordewener

See screenshot of EPIC PRIVACY BROWSER
https://doodiszodoodnogniet.nl/screenshots/