Title: Vertical alignment not correct Last modified: April 8, 2021 --- # Vertical alignment not correct * Resolved [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/) * Hi There In my shop in the single product pages the vertical alignment of product title, product price and add to basket button is not correct. * Can you help (maybe with css) * Kind regards, Nico * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fvertical-alignment-not-correct%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/vertical-alignment-not-correct/page/2/?output_format=md) [→](https://wordpress.org/support/topic/vertical-alignment-not-correct/page/2/?output_format=md) * [Elvin](https://wordpress.org/support/users/ejcabquina/) * (@ejcabquina) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14291772) * 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. * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14291850) * 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/](https://doodiszodoodnogniet.nl/screenshots/)) * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14293075) * The image at [https://doodiszodoodnogniet.nl/screenshots/](https://doodiszodoodnogniet.nl/screenshots/) shows how I would like it to become. * [Elvin](https://wordpress.org/support/users/ejcabquina/) * (@ejcabquina) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14295736) * 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](https://share.getcloudapp.com/geubwR8j) * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14296370) * 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/](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; } } ``` * Theme Author [Tom](https://wordpress.org/support/users/edge22/) * (@edge22) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14299320) * 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 '
'; }, 5 ); add_action( 'woocommerce_after_single_product_summary', function() { echo '
'; }, 5 ); ``` * Then you’d add some CSS: * ``` .single-product-area { max-width: 600px; margin-left: auto; margin-right: auto; } ``` * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14299430) * 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/](https://doodiszodoodnogniet.nl/screenshots/) * Theme Author [Tom](https://wordpress.org/support/users/edge22/) * (@edge22) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14299780) * The code I shared should do exactly that. It won’t add a purple rectangle. * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14301703) * 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 * Theme Author [Tom](https://wordpress.org/support/users/edge22/) * (@edge22) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14302512) * 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; } } ``` * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14303563) * Hi Tom I did what you suggested. It does not seem to work. Nico * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14304666) * 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 * Theme Author [Tom](https://wordpress.org/support/users/edge22/) * (@edge22) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14308575) * Any chance you can show me a screenshot of what you’re seeing? It’s looking good on mobile to me. * Thread Starter [nico6293](https://wordpress.org/support/users/nico6293/) * (@nico6293) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14310944) * 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/](https://doodiszodoodnogniet.nl/screenshots/) * Theme Author [Tom](https://wordpress.org/support/users/edge22/) * (@edge22) * [5 years, 2 months ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/#post-14313655) * You could try this: * ``` @media (max-width: 768px) { .woocommerce div.product form.cart { display: inline-block; } } ``` Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/vertical-alignment-not-correct/page/2/?output_format=md) [→](https://wordpress.org/support/topic/vertical-alignment-not-correct/page/2/?output_format=md) The topic ‘Vertical alignment not correct’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot. png) * GeneratePress * [Support Threads](https://wordpress.org/support/theme/generatepress/) * [Active Topics](https://wordpress.org/support/theme/generatepress/active/) * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/) * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/) * 19 replies * 3 participants * Last reply from: [Tom](https://wordpress.org/support/users/edge22/) * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/vertical-alignment-not-correct/page/2/#post-14323606) * Status: resolved