Conversation
supportHi, In some product boxes, there are many blank, empty space after “Go to Amazon” button. That does not look good. Is there any way, to remove that? + is there any way, to re-locate image? instead of left-top? Sincerely.
Hi @izreview , Can you provide an image of those empty blank spaces? The size and spacing of the product block boxes have been finely tuned for a smooth experience, I want to figure out if you are experiencing some glitches or you just want to custom edit the product block appearance. As for the second question, no, there is currently not a simple way to relocate the product image. If you really want to do that you have to use custom CSS and change the flex order of the product box elements. Please beware that custom CSS might not work flawlessy with the following releases of the plugin. Kind regards, -pizza2mozzarella
Hi, You can see the empty space, below “Go to Amazon” button, at the test page. https://caddx.izreview.com/aa/ Sincerely.
Hi, I’ve analyzed your website. First of all the CSS doesnt load on the mobile version, check if your cache plugin is overoptimizing the mobile experience. The product block should look with the same style in both desktop and mobile version, they only shrink, adapt and stack to fit the different screen proportions. You can clearly see that there are issues as the corners are not rounded in the mobile version. As for the desktop version, well there is something in your theme that push the height of product blocks to a fixed minimum. Those blocks are flexboxes and will fill the voids with blank space. This will happen with any modern block that is responsive. Experiment with other theme settings or with new themes and you will see the results. If you still want to keep that configuration and tweak the block sizes you have to rely to custom CSS styles and hook them to the product block class names. EDIT: Found the culprit! The problem is a custom CSS line you have added to the website: .wrapper { display: flex; min-height: 100vh; flex-direction: column; position: relative; transition: all .3s cubic-bezier(.79, .14, .15, .86); } just remove that min-height: 100vh; from your custom CSS and the blocks will look perfectly fine. Hope this will help, -pizza2mozzarella This reply was modified 6 months, 2 weeks ago by pizza2mozzarella .
Hi @izreview , Can you provide an image of those empty blank spaces? The size and spacing of the product block boxes have been finely tuned for a smooth experience, I want to figure out if you are experiencing some glitches or you just want to custom edit the product block appearance. As for the second question, no, there is currently not a simple way to relocate the product image. If you really want to do that you have to use custom CSS and change the flex order of the product box elements. Please beware that custom CSS might not work flawlessy with the following releases of the plugin. Kind regards, -pizza2mozzarella
Hi, You can see the empty space, below “Go to Amazon” button, at the test page. https://caddx.izreview.com/aa/ Sincerely.
Hi, I’ve analyzed your website. First of all the CSS doesnt load on the mobile version, check if your cache plugin is overoptimizing the mobile experience. The product block should look with the same style in both desktop and mobile version, they only shrink, adapt and stack to fit the different screen proportions. You can clearly see that there are issues as the corners are not rounded in the mobile version. As for the desktop version, well there is something in your theme that push the height of product blocks to a fixed minimum. Those blocks are flexboxes and will fill the voids with blank space. This will happen with any modern block that is responsive. Experiment with other theme settings or with new themes and you will see the results. If you still want to keep that configuration and tweak the block sizes you have to rely to custom CSS styles and hook them to the product block class names. EDIT: Found the culprit! The problem is a custom CSS line you have added to the website: .wrapper { display: flex; min-height: 100vh; flex-direction: column; position: relative; transition: all .3s cubic-bezier(.79, .14, .15, .86); } just remove that min-height: 100vh; from your custom CSS and the blocks will look perfectly fine. Hope this will help, -pizza2mozzarella This reply was modified 6 months, 2 weeks ago by pizza2mozzarella .