Vertical alignment not correct

Hi there,

I’m not exactly sure I understand how you want it laid out.

Can you tell us how you want it aligned? Perhaps what you meant was the text alignment? (both are text-align: center;, maybe you want it text-align: left; ? )

Let us know.

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/)

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

Ah if that’s the case, you should do the following.

For the image to go to the left:

You’ll have to remove padding-left: 25% on this CSS: It’s pushing the image to the right.

@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%;
    padding-left: 25%;
}

You then add this CSS:

@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;
}
}

Here’s how it would look: https://share.getcloudapp.com/geubwR8j

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;
  }
}

You would need to add a wrapper around the product images and short description. Something like this PHP:

add_action( 'woocommerce_before_single_product_summary', function() {
    echo '<div class="single-product-area">';
}, 5 );

add_action( 'woocommerce_after_single_product_summary', function() {
    echo '</div>';
}, 5 );

Then you’d add some CSS:

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

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/

The code I shared should do exactly that. It won’t add a purple rectangle.

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

You have this right now:

@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%;
}

Try changing it to this:

@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;
    }
}

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

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

Any chance you can show me a screenshot of what you’re seeing? It’s looking good on mobile to me.

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/

You could try this:

@media (max-width: 768px) {
    .woocommerce div.product form.cart {
        display: inline-block;
    }
}