Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 5, 2021 at 3:23 pm #1285792
    ClimbingSocks

    Hi,
    how are you?
    We would like to edit the product variation area of our single product page especially on mobile phones: https://climbingsocks.com/produkt/klettersocken-von-climbingsocks/
    Is there a way to make the highlighted column in the following picture more narrow? https://imgur.com/kEmi1dB
    We would also like to move the text “Der Bestseller für kleine Kletterfüße für Schuhgrößen bis 41.” + quantity counter + add to cart button to the very left of the variation area on mobile and larger screens.
    How can we accomplish this?
    See also my other request here: https://kriesi.at/support/topic/make-add-to-cart-button-full-width/

    Thank you very much,
    Magnus

    • This topic was modified 3 years, 9 months ago by ClimbingSocks.
    March 7, 2021 at 5:41 am #1286136
    Rikard

    Hi Magnus,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.single-product-summary .jdgm-widget, .single-product-summary .variation_modified, .single-product-summary .legal-price-info,  .single-product-summary .<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>-product-details__short-description {
margin-left: 20px;
}
}

    Best regards,
    Rikard

    • This reply was modified 3 years, 9 months ago by Rikard.
    March 7, 2021 at 9:38 am #1286161
    ClimbingSocks

    Hi Rikard,

    unfortunately the code does not show any results.

    Do you have further ideas, please?

    Best regards,
    Magnus

    March 8, 2021 at 7:53 am #1286332
    Rikard

    Hi Magnus,

    I’ve added the CSS for you, and it’s applying to your site now. Please review it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.