Return to previous page

Help to arrange product page layout using new classes to properly fit

This topic has 9 replies, 2 voices, and was last updated 1 years, 4 months ago ago by Tony Rodriguez

Niddy

Participant

November 28, 2022 at 13:59

Hi

Wondering if it’s possible to help me to get the product page layout right. Using css does the job however I need to use specific page and element classes which is no use as would need to add 100’s of css edits to get it to do what I need so hoping you can assist.

See private info please and keep replies private if showing site / url etc.

Thanks for any help.

Please, contact administrator
for this information.

#339894 Copied Theme version: 1

8 Answers
Tony Rodriguez

Support staff

November 29, 2022 at 05:26
Hello, @Niddy,

Could you please try with the below-listed CSS code, It will work on complete site products, and if not then please share the URL of your live site, so that I will check and try to prepare the CSS for your site?
```
@media only screen and (min-width: 575px) and (max-width: 992px) {
.et_column.et_product-block.mob-full-width.mob-full-width-children.etheme-woocommerce-product-gallery.justify-content-start {
	width: 40% !important;
}
.et_column.et_product-block.mob-full-width.mob-full-width-children.justify-content-start {
	width: 60% !important;
}
}
```
Regards 8Themes Team.
#339949 Copied
Niddy

Participant

November 29, 2022 at 10:33

Hi Tony

Thanks for this, it isn’t working right so please see private info for details.

It’s affecting all columns on the product page as the tab section that’s currently 100% (split into a 60/40 with sidebar) is also affected. It’s specifically the top section that contains the image to the left and product data to the right that needs changing. Everything below (ie from tabs down) must stay as preset as it works fine.

Thanks again

Please contact administrator
for this information.

#339976 Copied

Niddy

Participant

November 30, 2022 at 08:48

Any ideas? Been 24hrs 🤷🏻

#340084 Copied

Tony Rodriguez

Support staff

November 30, 2022 at 09:24

Hello, @Niddy,

Actually, there was a line of code missing I have added it see the image under private content area, by doing this the layout you want to achieve is solved. see the resulting image under private content area, please check back to your site after clearing the browser cache.

Regards 8Themes Team.

Please contact administrator
for this information.

#340097 Copied

Niddy

Participant

November 30, 2022 at 10:22

Hi

Thank you kindly. Perfect result.

Please see private.

Please contact administrator
for this information.

#340111 Copied

Tony Rodriguez

Support staff

November 30, 2022 at 11:24

Hello, @Niddy,

I have updated this topic. All the provided images of my replies are under the private content area of this topic. please check back now.

Yes, it is dimensions for chrome. To know how to show viewport sizes. Please check this article: https://developer.chrome.com/docs/devtools/device-mode/#viewport

Regards 8Themes Team.

#340119 Copied

Niddy

Participant

November 30, 2022 at 11:44

Awesome thank you very much. Love it. Perfect 🍻

#340124 Copied

Tony Rodriguez

Support staff

November 30, 2022 at 11:50

Hello, @Niddy,

Most Welcome 🙂,

If you do not mind, can you please leave 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.

Have a great day 🙂
Topic Closed.
Regards 8Themes Team.

#340125 Copied
Tagged: arrange classes, persuasive, product page layout, properly fit, templates, woocommerce, wordpress
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Help to arrange product page layout using new classes to properly fit’' has been successfully resolved, and the topic is now closed for further responses

Help to arrange product page layout using new classes to properly fit

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection