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, 11 months ago ago by Tony Rodriguez

  • Avatar: Niddy
    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.
    8 Answers
    Avatar: Tony Rodriguez
    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.

    Avatar: Niddy
    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.
    Avatar: Niddy
    Niddy
    Participant
    November 30, 2022 at 08:48

    Any ideas? Been 24hrs ??

    Avatar: Tony Rodriguez
    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.
    Avatar: Niddy
    Niddy
    Participant
    November 30, 2022 at 10:22

    Hi

    Thank you kindly. Perfect result.

    Please see private.

    Please contact administrator
    for this information.
    Avatar: Tony Rodriguez
    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.

    Avatar: Niddy
    Niddy
    Participant
    November 30, 2022 at 11:44

    Awesome thank you very much. Love it. Perfect ?

    Avatar: Tony Rodriguez
    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.

  • 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

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.